Package Exports
- @mux/mux-uploader-react
- @mux/mux-uploader-react/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mux/mux-uploader-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
<MuxUploader/>
Introduction
<MuxUploader>
is React component for uploading files to Mux.
<MuxUploaderDrop>
is an optional supporting React component for drop-in drag and drop and overlay. You can always configure your own drag and drop with <MuxUploader>
.
If you are looking for a direct upload interface and a progress bar, you're in the right place.
Installation
If you're using npm
or yarn
, install that way:
Package manager
yarn add @mux/mux-uploader-react
or
npm i @mux/mux-uploader-react
Then, import the library into your application with either import
or require
:
import '@mux/mux-uploader-react';
or
require('@mux/mux-uploader-react');
Usage
const MuxUploaderWithMuxUploaderDropExample = () => {
return (
<div>
<h1>Simple MuxUploader and Mux Uploader Drop Examples</h1>
{/* Upload button by itself. Displays upload progress in text as percentage. */}
<MuxUploader url="authenticated-url" type="bar" status></MuxUploader>
{/* Upload button by itself. Does not display text percentage. */}
<MuxUploader url="authenticated-url" type="bar"></MuxUploader>
{/* Upload button with access to optional supplentary drag and drop features. */}
<MuxUploaderDrop mux-uploader="uploader">
<MuxUploader url="authenticated-url" id="uploader"></MuxUploader>
</MuxUploaderDrop>
</div>
);
};
Props
<MuxUploader>
Property | 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 for how to create one. Required. | undefined |
id |
string |
An ID that allows <MuxUploaderDrop> to locate <MuxUploader> . Required if you use <MuxUploaderDrop> . |
N/A |
type |
"bar" |
Specifies the visual type of progress bar. A radial type is in-progress. | "bar" |
status |
boolean |
Toggles text status visibility of progress bar. The text that is displayed is a percentage by default. If you prefer just the progress bar with no text upload status, don't include this attribute. | false |
formatProgress |
function |
A function that accepts numeric percent and is expected to return a string. Allows for customizing how the progress should be rendered - whether you want to display only the number, a sentence with the number etc. i.e. formatProgress={(percent: number) => ${percent} percent uploaded} |
A function that yields only the percent as a string i.e. "60%" |
dynamicChunkSize |
boolean |
Toggles uploading with dynamic chunk sizes. Chunk sizes will change with upload speed to attempt to optimize upload. | false |
<MuxUploaderDrop>
Property | Type | Description | Default |
---|---|---|---|
overlay |
boolean |
Toggles fullscreen overlay on dragover. | false |
overlayText |
string |
Optional text to display on dragover when overlay is on. |
'' |
muxUploader |
string |
Must match the id on <MuxUploader> . Required. |
N/A |
Callbacks
<MuxUploader>
<MuxUploader>
has a handful of a number of callbacks associated with events to handle uploading state.
Prop | Description |
---|---|
onUploadStart |
Fired when the upload begins. |
onChunkAttempt |
Invoked immediately before a chunk upload is attempted. |
onChunkSuccess |
Invoked when an indvidual chunk is successfully uploaded. Sample response: { detail: { chunk: Integer, attempts: Integer, response: XhrResponse } } |
onUploadError |
Invoked when an error occurs in the chunked upload process. |
onProgress |
Invoked continuously with incremental upload progress. This returns the current percentage of the file that's been uploaded. Sample response: { detail: [0..100] } |
onSuccess |
Invoked when the entire file has successfully completed uploading. |