API Reference — MultipleUpload

Constructor Options

Pass these options when creating a new MultipleUpload instance.

new MultipleUpload(selector, options)

Option	Type	Default	Description
`uploadUrl`	`string`	`''`	Server endpoint URL for file uploads
`multiple`	`boolean`	`true`	Allow selecting multiple files
`autoUpload`	`boolean`	`false`	Start uploading immediately after file selection
`maxFileSize`	`number`	`0`	Maximum file size in bytes (0 = unlimited)
`maxFiles`	`number`	`0`	Maximum number of files allowed (0 = unlimited)
`allowedTypes`	`string[]`	`[]`	Allowed MIME types or extensions (e.g. `['image/*', '.pdf']`)
`chunkSize`	`number`	`0`	Chunk size in bytes for chunked uploads (0 = disabled)
`headers`	`object`	`{}`	Custom HTTP headers to send with each request
`fieldName`	`string`	`'file'`	Form field name for the file
`formData`	`object`	`{}`	Additional form data to send with each request
`withCredentials`	`boolean`	`false`	Send cookies with cross-origin requests
`responseParser`	`function`	`null`	Custom function to parse server response
`thumbnailWidth`	`number`	`80`	Thumbnail preview width in pixels
`thumbnailHeight`	`number`	`80`	Thumbnail preview height in pixels
`showThumbnails`	`boolean`	`true`	Show image thumbnails in the file list
`showFileSize`	`boolean`	`true`	Show file sizes in the file list
`showProgress`	`boolean`	`true`	Show progress bars during upload
`dropZoneText`	`string`	`'Drag & drop...'`	Text displayed in the drop zone
`browseButtonText`	`string`	`'Browse'`	Text for the browse button
`uploadButtonText`	`string`	`'Upload'`	Text for the upload button
`enablePaste`	`boolean`	`true`	Enable clipboard paste support
`attachmentMode`	`boolean`	`false`	Use compact attachment-style display
`darkMode`	`boolean\|'auto'`	`false`	Enable dark mode (`'auto'` uses system preference)

Methods

Methods available on a MultipleUpload instance.

Method	Parameters	Returns	Description
`upload()`	—	`void`	Start uploading all queued files
`cancelTask(taskId)`	`string`	`void`	Cancel a specific upload task by ID
`removeTask(taskId)`	`string`	`void`	Remove a task from the queue
`cancelAll()`	—	`void`	Cancel all active uploads
`clearCompleted()`	—	`void`	Remove all completed tasks from the queue
`getCompletedFiles()`	—	`object[]`	Get array of completed file response objects
`getFileGuids()`	—	`string[]`	Get array of file GUIDs from completed uploads
`addFiles(files)`	`FileList\|File[]`	`void`	Programmatically add files to the queue
`reset()`	—	`void`	Reset the uploader to its initial state

Events / Callbacks

Callback functions passed in the constructor options.

Callback	Parameters	Description
`onSelect(files)`	`File[]`	Fired when files are selected (before adding to queue)
`onProgress(percent)`	`number`	Overall upload progress (0-100)
`onComplete(responses)`	`object[]`	All files have finished uploading
`onError(error)`	`object`	An upload error occurred
`onTaskStart(task)`	`object`	An individual file upload has started
`onTaskComplete(task, response)`	`object, object`	An individual file upload completed
`onTaskError(task, error)`	`object, object`	An individual file upload failed
`onTaskProgress(task, percent)`	`object, number`	Progress update for an individual file
`onChange(tasks)`	`object[]`	The task queue has changed
`onInit(instance)`	`MultipleUpload`	Component has been initialized
`onQueueRender(queue)`	`HTMLElement`	The queue UI has been re-rendered
`onPaste(files)`	`File[]`	Files pasted from clipboard

CSS Variables

Override these CSS custom properties to theme the component.

Variable	Default	Description
`--mu-font-family`	`inherit`	Font family for all text
`--mu-font-size`	`14px`	Base font size
`--mu-color-primary`	`#0891b2`	Primary accent color
`--mu-color-success`	`#16a34a`	Success state color
`--mu-color-error`	`#dc2626`	Error state color
`--mu-color-text`	`#334155`	Primary text color
`--mu-color-text-muted`	`#94a3b8`	Secondary/muted text color
`--mu-color-bg`	`#ffffff`	Component background color
`--mu-color-border`	`#e2e8f0`	Border color
`--mu-color-drop-bg`	`#f8fafc`	Drop zone background color
`--mu-color-drop-hover`	`#ecfeff`	Drop zone hover/active background
`--mu-color-progress-bg`	`#e2e8f0`	Progress bar track background
`--mu-color-progress`	`#0891b2`	Progress bar fill color
`--mu-border-radius`	`8px`	Border radius for the component
`--mu-border-radius-item`	`6px`	Border radius for file list items
`--mu-spacing`	`12px`	Base spacing unit
`--mu-thumbnail-size`	`48px`	Thumbnail dimensions

CSS Classes

Classes applied to the component elements. Use these for custom styling or overrides.

Class	Element	Description
`.mu-upload-area`	Container	Root container element
`.mu-drop-zone`	Drop zone	The drag-and-drop target area
`.mu-drop-zone-active`	Drop zone	Applied when files are dragged over
`.mu-drop-text`	Text	Instruction text inside drop zone
`.mu-drop-icon`	Icon	Icon inside the drop zone
`.mu-file-list`	List container	Container for all file items
`.mu-file-item`	File row	Individual file entry in the queue
`.mu-file-name`	Text	File name display
`.mu-file-size`	Text	File size display
`.mu-file-thumb`	Image	Thumbnail preview image
`.mu-progress`	Progress	Progress bar container
`.mu-progress-bar`	Progress	Progress bar fill element
`.mu-status`	Status	Status text (uploading, complete, error)
`.mu-btn-cancel`	Button	Cancel button for a file item
`.mu-btn-remove`	Button	Remove button for a file item
`.mu-btn-upload`	Button	Upload button (when autoUpload is false)
`.mu-btn-browse`	Button	Browse files button
`.mu-dark`	Container	Applied when dark mode is enabled
`.mu-attachment`	Container	Applied in attachment mode

TaskStatus Enum

Possible status values for upload tasks.

Value	Description
`'queued'`	File is in the queue, waiting to upload
`'uploading'`	File is currently being uploaded
`'complete'`	File uploaded successfully
`'error'`	Upload failed with an error
`'cancelled'`	Upload was cancelled by the user