Mux Uploader for web

Mux Uploader is a drop-in web component that makes it easy to upload video files to Mux.

This component allows you to build a fully-functional, customizable video upload UI in your application using a single line of code. Mux Uploader supports:

• Manual file selection
• Drag and drop for files
• Optional pausing and resuming of uploads
• Automatic offline/online detection with upload resumes
• And more!

Mux Uploader can be used as either a web component (<mux-uploader> from @mux/mux-uploader), or a React component (<MuxUploader /> from @mux/mux-uploader-react).

Quick start

Here are some examples of Mux Uploader in action.

HTML element

Install with either npm, yarn or load Mux Uploader from the hosted script.

NPM

npm install @mux/mux-uploader@latest

Yarn

yarn add @mux/mux-uploader@latest

Hosted

<script src="https://cdn.jsdelivr.net/npm/@mux/mux-uploader"></script>

Example HTML element implementation

<script
  src="https://cdn.jsdelivr.net/npm/@mux/mux-uploader"
></script>
<mux-uploader></mux-uploader>

React

You will need to select one of the package options below. Both examples will automatically update the uploader. You can always anchor the package to a specific version if needed.

NPM

npm install @mux/mux-uploader-react@latest

Yarn

yarn add @mux/mux-uploader-react@latest

Example React Usage

import MuxUploader from "@mux/mux-uploader-react";
export default function App() {
  return (
    <MuxUploader/>
  );
}

Upload a video

Mux Uploader allows you to use upload URLs provided by Mux's Direct Uploads in your web application. It takes care of rendering a file selector, uploading your video file, displaying progress updates to the user, handling retries, and more.

This does mean that you'll need to provide a new upload URL whenever a user will be uploading a new video file in your application. You provide that URL value via the endpoint attribute or property. It looks like this:

Example HTML

<mux-uploader
  endpoint="https://my-authenticated-url/storage?your-url-params"
></mux-uploader>

The endpoint indicates the direct upload URL that will receive the video file you're uploading.

You can generate a signed direct upload URL by making a server-side API call to Mux's Create Direct Upload endpoint, or you can use curl based on the example from the link if you just want to test it out.

In a successful API response, you will receive a unique signed upload URL that can then be passed along to your client application and set as the endpoint property on a mux-uploader element. The URL for a Direct Upload looks like "https://storage.googleapis.com/video...".

HTML element

<!-- Replace endpoint value with a valid Mux Video Direct Upload URL -->
<mux-uploader
  endpoint="https://httpbin.org/put"
></mux-uploader>

React

import MuxUploader from "@mux/mux-uploader-react";

export default function App() {
  return (
    <MuxUploader endpoint="https://httpbin.org/put" />
  );
}

Fetching the upload URL async

At the time you render the <mux-uploader>, you may not have the direct upload URL yet. Instead, you might want to retrieve it async from your server after a user selects a file. You can do that by setting the endpoint property value to a custom function instead of a URL.

<mux-uploader></mux-uploader>
<script>
  const muxUploader = document.querySelector("mux-uploader");
  /*
    Endpoint should be a function that returns a promise and resolves
    with a string for the upload URL.
  */
  muxUploader.endpoint = function () {
    /*
      In this example, your server endpoint would return the upload URL
      in the response body "https://storage.googleapis.com/video..."
    */
    return fetch("/your-server/api/create-upload").then(res => res.text());
  };
</script>

This is even easier using React props:

import MuxUploader from "@mux/mux-uploader-react";
export default function App() {
  return (
    <MuxUploader
      endpoint={() => {
        return fetch("/your-server/api/create-upload")
          .then(res => res.text());
      }}
    />
  );
}

Easy customization

As you can see in the examples above, Mux Uploader provides a fairly feature rich and reasonably styled (albeit basic) UI by default.

It will automatically update based on different stages or states of uploading, like showing a UI for file selection before a video has been picked, showing progress as the file is uploaded, showing when the file upload has completed, and showing error state with the option to retry if something goes wrong with the upload.

In addition, Mux Uploader provides many ways to customize this look and feel, including:

• attributes / properties like no-drop or pausable to enable/disable UI components
• intuitive styling with CSS, just like any other HTML element.
• state transition attributes like upload-in-progress or upload-error for responsive styling
• attribute / property based data customization for things like dynamic-chunk-size or max-file-size
• overridable and composable components like <mux-uploader-file-select> or <mux-uploader-drop> for full flexibility of UI