Add MultipleUpload to your project in minutes. Works with any backend.
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>For bundler-based projects (webpack, Vite, Rollup, etc.):
npm install multipleuploadThen import in your JavaScript:
import { MultipleUpload } from 'multipleupload';
import 'multipleupload/dist/multipleupload.css';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>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);
}
});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.
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.
Send authentication tokens or custom headers with every upload request:
new MultipleUpload('#uploader', {
uploadUrl: '/api/upload',
headers: {
'Authorization': 'Bearer ' + token,
'X-CSRF-Token': csrfToken
}
});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
};
}
});