Mux Uploader for web | Mux

Mux Uploader for web

Mux Uploader is a drop-in component that uploads video files to Mux from your web application. Use it when your users select files or drag and drop them to upload.

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!

Network Error

A network error caused the media download to fail.

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.

Mux Uploader HTML element

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

NPM

Yarn

Hosted

Example HTML element implementation

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

Mux Uploader React component

You will need to select one of the package options below. Both examples will automatically update the uploader.

Example React Usage

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

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

Upload a video

Mux Uploader allows you to use upload URLs provided by Mux's Direct Uploads API 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.

Overview of the upload process

Video uploads and processing take time. Processing time can vary depending on the file size and type of video that you upload.

Mux uses webhooks to keep your application informed about what's happening with your uploaded video — from when the upload completes to when the video is ready to be played.

The overall flow generally looks like this:

1. Set up webhooks

Set up a public webhook endpoint in your application to receive events from Mux
Configure the webhook in your Mux dashboard to send events to this endpoint

2. Upload the video

Create a direct upload URL using the Mux API
Save the upload ID to your database
Pass the URL to the endpoint property on the Mux Uploader component

3. Wait for video to be ready

When the upload completes, show a "processing" indicator to the user.
Poll your database to check if the video is ready for playback.

4. Handle webhook events

Listen for specific webhook events, particularly:

video.upload.asset_created which indicates that the upload has completed and an asset has been created
video.asset.ready which indicates that the video has been processed and is ready for playback

5. Store the information in your database

Save the asset_id and playback_id to your database, associating them with the user or relevant entity in your application.

Here's an example of how you might structure your database table schema:

videos
id	uuid (primary key)
user_id	uuid (foreign key)	References users.id
upload_id	string	From initial upload
asset_id	string	From Mux webhook
playback_id	string	From Mux webhook
title	string	Optional metadata
status	enum	e.g. `preparing`, `ready`
created_at	timestamp
updated_at	timestamp

6. Use the IDs

While Mux generates several IDs during the upload and processing flow, there are two key IDs you'll primarily work with:

The asset_id: This is used when you need to manage your video through the Mux API (like deleting the video or checking its status)
The playback_id: This is what you'll use to actually play your video, either by adding it to Mux Player or creating a URL where your video can be played.

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.

Customizing the UI

Mux Uploader provides many ways to customize its look and feel, including attributes/properties, intuitive styling with CSS, state transition attributes for responsive styling, and overridable components for full flexibility of UI.