MU MultipleUpload 1.0.0
Package Home / Getting Started

Getting Started

Use this page when you want the fastest path from package download to a working uploader.

What you need

  • A page that can load multipleupload.js and multipleupload.css
  • Licensed customers should also keep multipleupload.lic beside multipleupload.js
  • An upload endpoint that accepts multipart form data at uploadUrl
  • A JSON response that returns success, fileGuid, fileName, and fileSize

Install the files

The direct download bundle is already organized for script-tag usage.

<link rel="stylesheet" href="./dist/multipleupload.css">
<script src="./dist/multipleupload.js"></script>
Tip: if you use a bundler instead, the npm package points to the same files in dist/. The package also includes a placeholder dist/multipleupload.lic file you can replace with your licensed copy.

Apply your license

Licensed customers can deploy a physical multipleupload.lic file instead of replacing the runtime script.

dist/
  multipleupload.js
  multipleupload.css
  multipleupload.d.ts
  multipleupload.lic   <-- replace this placeholder with the licensed file from Client Center
Default behavior: multipleupload.js automatically looks for a sibling multipleupload.lic. If you store the license elsewhere, pass licenseUrl when you create the uploader.

Use the default markup

This is the simplest markup that supports browsing, drag and drop, previews, progress, and queue rendering.

<div id="uploader" class="mu-uploader">
    <button type="button" class="mu-select-btn">Select Files</button>
    <input type="file" class="mu-file-input" multiple style="display:none" />
    <div class="mu-dropzone">
        <div class="mu-dropzone-text">Drag & drop files here</div>
    </div>
    <div class="mu-preview-area"></div>
    <div class="mu-progress" style="display:none">
        <div class="mu-progress-bar"><div class="mu-progress-fill"></div></div>
        <div class="mu-progress-text"></div>
    </div>
    <div class="mu-queue"></div>
</div>

Initialize the uploader

Set your upload endpoint and enable the interaction patterns you want.

var uploader = new MultipleUpload('#uploader', {
    uploadUrl: '/api/upload',
    licenseUrl: '/licenses/multipleupload.lic',
    multiple: true,
    autoUpload: true,
    maxFileSize: 100 * 1024 * 1024,
    allowedMimeTypes: 'image/*,application/pdf',
    onComplete: function(files) {
        console.log('All uploads complete:', files);
    },
    onError: function(message, fileName) {
        console.error('Upload failed:', fileName, message);
    }
});

Expected upload response

MultipleUpload expects a successful upload response to look like this unless you provide a custom responseParser.

{
    "success": true,
    "fileGuid": "a1b2c3d4",
    "fileName": "document.pdf",
    "fileSize": 12345
}
Custom response shape? Use responseParser(responseText, task) to map your API response into the expected result object.

Chunked upload endpoints

For large files, enable chunked: true and expose chunk upload plus chunk complete endpoints.

new MultipleUpload('#uploader', {
    uploadUrl: '/api/upload',
    chunked: true,
    chunkSize: 2 * 1024 * 1024,
    chunkUrl: '/api/upload/chunk',
    chunkCompleteUrl: '/api/upload/chunk/complete'
});

Dynamic headers and response parsing

Headers can be static or generated per task. Response parsing can also use the active task.

new MultipleUpload('#uploader', {
    uploadUrl: '/api/upload',
    headers: function(task) {
        return {
            'Authorization': 'Bearer YOUR_TOKEN',
            'X-Upload-Id': task.id
        };
    },
    responseParser: function(responseText, task) {
        var data = JSON.parse(responseText);
        return {
            success: data.ok !== false,
            fileGuid: data.id,
            fileName: data.name || task.fileName,
            fileSize: data.size || task.fileSize
        };
    }
});

Useful next pages

These are the quickest follow-up reads once the basic flow works.

API Reference

All current options, methods, callbacks, and helper utilities.

Open reference

Demo Guide

Pick the right included demo file for your use case.

Open guide

Overview Demo

Start from the working example that mirrors the default package flow.

Open demo