Below is a list of all available components in the @mux/mux-uploader-react package. For many cases, you can simply use <MuxUploader> for both
upload state management and UI. For more advanced use cases, you may use the subcomponents directly, using <MuxUploader> for upload state management or partial UI. See each component section below for details.
| Component name | Description |
|---|---|
<MuxUploader> |
A fully-featured UI component. Also manages the uploading state. Required |
<MuxUploaderDrop> |
Enables drag-and-drop functionality for handling file input. |
<MuxUploaderFileSelect> |
Displays the system file-select dialog when clicked. |
<MuxUploaderPause> |
Displays a pause/resume button (with a disabled 'Pausing...' while a requested pause is pending completion of the current chunk upload) |
<MuxUploaderProgress> |
Displays a progress indicator showing how much of your file has been uploaded. |
<MuxUploaderRetry> |
Renders a "retry" button if the upload fails. |
<MuxUploaderStatus> |
Displays the upload status (e.g. completed or error statuses). |
Check out the MuxUploaderSeparateComponents.tsx page example Next.JS app page to see a real-world example of how these components can be used individually.
The main, "batteries included" component. Can be used as a full-featured UI or simply for chunked upload state and functional management.
To use for uploading state management only, you can style <MuxUploader> with a display: none;.
In addition to the props listed below, <MuxUploader> supports standard props such as id, style and className.
| Prop | Type | Description | Default |
|---|---|---|---|
endpoint |
string | () => Promise |
Either a) the authenticated URL that your file will be uploaded to or b) an async function that yields a promise that resolves to that url. Check out the direct uploads docs. Required. | undefined |
noDrop |
boolean |
Hide/remove the drag & drop UI | false |
noProgress |
boolean |
Hide/remove the upload progress UI (percentage and bar) | false |
noStatus |
boolean |
Hide/remove the upload status UI (errors, completion, offline) | false |
noRetry |
boolean |
Hide/remove the retry UI button (shown if an upload fails before completion) | false |
pausable |
boolean |
Show the optional pause upload UI button (allows users to pause and resume uploads) | false |
type |
"percentage" | "bar" | "radial" (Experimental) |
Show a different upload progress UI instead of a progress bar | undefined |
chunkSize |
number (kB, integer) |
Specifies the size of each upload chunk, with the exception of the final chunk which may be smaller. This parameter must be in multiples of 256. | undefined |
dynamicChunkSize |
boolean |
Automatically adapt upload chunk size larger or smaller based on estimated available throughput. | false |
maxFileSize |
number (kB, integer) |
Set a maximum file size allowed for upload. | undefined |
paused |
boolean |
Set to pause an in-progress upload. Get to check the paused state (see pausable, above). Cannot use before upload has begun. Note that pausing will wait until the currently uploading chunk finishes. |
false |
useLargeFileWorkaround |
boolean |
Enables a less memory-efficient way of loading and chunking files for environments that don't reliably handle ReadableStream for large files. This can occur on e.g. Safari browsers with files >= 4GB. |
false |
<MuxUploader/> has a number of callbacks for monitoring upload state. For example, a callback for 'uploaderstart' event is onUploadStart. See mux-uploader's reference for a list of events.
See mux-uploader's reference for a list of all available slots.
See mux-uploader's reference for a list of all available CSS variables.
See mux-uploader's reference for a list of all available CSS parts.
A "container" element that lets you drag & drop files for uploading via <MuxUploader>. Is the root component of <MuxUploader> by
default.
In addition to the props listed below, <MuxUploaderDrop> supports standard props such as style and className.
| Prop | Type | Description | Default |
|---|---|---|---|
overlay |
boolean |
Toggles showing an overlay on dragover. | false |
overlayText |
string |
Optional text to display on dragover when overlay is on. |
'' |
muxUploader |
string (id) |
Associates the component with the <MuxUploader> instance via its id. Required. |
undefined |
See mux-uploader-drop's reference for a list of all available events.
See mux-uploader-drop's reference for a list of all available slots.
See mux-uploader-drop's reference for a list of all available CSS variables.
See mux-uploader-drop's reference for a list of all available CSS parts.
A component element that owns the UI to request browsing for a media file for uploading via <MuxUploader>. Displayed before file selection in
<MuxUploader> by default.
In addition to the props listed below, <MuxUploaderFileSelect> supports standard props such as style and className.
| Prop | Type | Description | Default |
|---|---|---|---|
muxUploader |
string (id) |
Associates the component with the <MuxUploader> instance via its id. Required. |
undefined |
See mux-uploader-file-select's reference for a list of all available events.
See mux-uploader-file-select's reference for a list of all available slots.
See mux-uploader-file-select's reference for a list of all available CSS variables.
See mux-uploader-file-select's reference for a list of all available CSS parts.
An element that owns the UI to request pausing and resuming uploading via <MuxUploader>. Optionally displayed during uploading on
<MuxUploader> by default (See its pausable prop, above).
In addition to the props listed below, <MuxUploaderPause> supports standard props such as style and className.
| Prop | Type | Description | Default |
|---|---|---|---|
muxUploader |
string (id) |
Associates the component with the <MuxUploader> instance via its id. Required. |
undefined |
See mux-uploader-pause's reference for a list of all available events.
See mux-uploader-pause's reference for a list of all available slots.
See mux-uploader-pause's reference for a list of all available CSS variables.
See mux-uploader-pause's reference for a list of all available CSS parts.
A component element for rendering the current upload progress. Displayed in two permutations during file upload
<MuxUploader> by default, both as a type="percentage" and type="bar" (see Attributes, below).
In addition to the props listed below, <MuxUploaderProgress> supports standard props such as style and className.
| Prop | Type | Description | Default |
|---|---|---|---|
muxUploader |
string (id) |
Associates the component with the <MuxUploader> instance via its id. Required. |
undefined |
type |
"percentage" | "bar" | "radial" |
Render progress as either a numeric percentage, a progress bar, or a radial/circular progress (Experimental) | undefined |
See mux-uploader-progress's reference for a list of all available events.
See mux-uploader-progress's reference for a list of all available slots.
See mux-uploader-progress's reference for a list of all available CSS variables.
See mux-uploader-progress's reference for a list of all available CSS parts.
An element that owns the UI to request retrying a failed upload via <MuxUploader>. Displayed when an error occurred during upload on
<MuxUploader> by default.
In addition to the props listed below, <MuxUploaderRetry> supports standard props such as style and className.
| Prop | Type | Description | Default |
|---|---|---|---|
muxUploader |
string (id) |
Associates the component with the <MuxUploader> instance via its id. Required. |
undefined |
See mux-uploader-retry's reference for a list of all available events.
See mux-uploader-retry's reference for a list of all available slots.
See mux-uploader-retry's reference for a list of all available CSS variables.
See mux-uploader-retry's reference for a list of all available CSS parts.
An element that renders the uploader status (completed, error, or offline) as human-readable text.
In addition to the props listed below, <MuxUploaderStatus> supports standard props such as style and className.
| Prop | Type | Description | Default |
|---|---|---|---|
muxUploader |
string (id) |
Associates the component with the <MuxUploader> instance via its id. Required. |
undefined |
See mux-uploader-status's reference for a list of all available events.
See mux-uploader-status's reference for a list of all available slots.
See mux-uploader-status's reference for a list of all available CSS variables.
See mux-uploader-status's reference for a list of all available CSS parts.