Getting Started

Add MultipleUpload to your project in minutes. Works with any backend.

Install via CDN

The fastest way to get started. Add the CSS and JS files from unpkg:

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/multipleupload/dist/multipleupload.css">

<!-- JS -->
<script src="https://unpkg.com/multipleupload/dist/multipleupload.js"></script>

Install via npm

For bundler-based projects (webpack, Vite, Rollup, etc.):

npm install multipleupload

Then import in your JavaScript:

import { MultipleUpload } from 'multipleupload';
import 'multipleupload/multipleupload.css';

CommonJS works from the same install — const MultipleUpload = require('multipleupload') (destructuring resolves too). Both entry points share one engine build, so bundlers never ship two copies. Types resolve under node, node16 and bundler resolution.

Basic HTML Markup

Add a container element with the MultipleUpload class structure:

<div id="uploader" class="mu-upload-area">
 <div class="mu-drop-zone">
 <p class="mu-drop-text">Drag & drop files here or click to browse</p>
 </div>
 <div class="mu-file-list"></div>
</div>

JavaScript Initialization

Initialize MultipleUpload with your upload endpoint and options:

new MultipleUpload('#uploader', {
 uploadUrl: '/api/upload',
 multiple: true,
 autoUpload: true,
 maxFileSize: 10 * 1024 * 1024, // 10 MB
 allowedTypes: ['image/*', '.pdf', '.docx'],
 onComplete: function(response) {
 console.log('Upload complete:', response);
 },
 onError: function(error) {
 console.error('Upload failed:', error);
 }
});

Expected Server Response

Your server endpoint should return JSON in this format:

{
 "success": true,
 "fileGuid": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
 "fileName": "document.pdf",
 "fileSize": 12345
}

The fileGuid is used to track uploaded files. You can customize the response parsing with the responseParser option.

Chunked Upload Setup

Enable chunked uploads for large files by setting the chunk size:

new MultipleUpload('#uploader', {
 uploadUrl: '/api/upload',
 chunkSize: 2 * 1024 * 1024, // 2 MB chunks
 multiple: true,
 onTaskProgress: function(task, percent) {
 console.log(task.fileName + ': ' + percent + '%');
 }
});

When chunkSize is set, files larger than the chunk size are automatically split and uploaded sequentially. Your backend receives each chunk as a separate request with chunk metadata headers.

Custom Headers

Send authentication tokens or custom headers with every upload request:

new MultipleUpload('#uploader', {
 uploadUrl: '/api/upload',
 headers: {
 'Authorization': 'Bearer ' + token,
 'X-CSRF-Token': csrfToken
 }
});

Custom Response Parser

If your server returns a different response format, use a custom parser:

new MultipleUpload('#uploader', {
 uploadUrl: '/api/upload',
 responseParser: function(response) {
 // Transform your server response to the expected format
 return {
 success: response.status === 'ok',
 fileGuid: response.id,
 fileName: response.name,
 fileSize: response.bytes
 };
 }
});

Next Steps

API Reference - Full list of options, methods, events, and CSS variables
Features - Overview of all capabilities
Demos - Working examples for every feature
Backend Guides - Server-side setup for Node.js, PHP, Python, and more