Customize the look and feel of Mux Uploader

Configure UI features

The basic use case of Mux Uploader includes many UI features which may be enabled or disabled by default. You can toggle many of these via attributes/properties.

Enable pausing

For larger video files, you may want to allow your users to pause and resume an upload. You can enable this in the UI using the pausable attribute, property, or React prop.

Because Mux Uploader uploads the file in chunks, it will wait to complete uploading the current chunk before pausing. To indicate this, the pause button will actually have 3 states:

1. Pause - indicates the upload is not currently paused, but can be by pressing the button.
2. Pausing - indicates that the upload will pause once the current chunk upload finishes. The button will be disabled in this case.
3. Resume - indicates the upload is currently paused, but can be resumed by pressing the button.

Below are examples of what this looks like in the UI.

Disable Retrying

If for some reason your video upload fails, Mux Uploader will allow a user to retry via the UI. You can disable this using the no-retry attribute or noRetry property in the web component, or just noRetry prop in React.

Below are examples of what this looks like in the UI.

Disable Drag & Drop

Mux Uploader makes drag and drop available for your video files by default. You can disable this using the no-drop attribute or noDrop property in the web component, or just noDrop prop in React.

Below are examples of what this looks like in the UI.

Disable other UI subcomponents or features

Mux Uploader also provides attributes and properties to disable:

• The upload progress UI (no-progress / noProgress for the web component attribute / property, noProgress for the React prop)
• The upload status UI (e.g. when the upload is complete or when an error occurs) (no-status / noStatus for the web component attribute / property, noStatus for the React prop)

Since removing these UI elements might result in a poor user experience, you may want to use Mux Uploader's subcomponents directly for a more bespoke design when doing so.

Override the file selector with slots

Because Mux Uploader is a web component, it lets you provide your own file select element simply by adding it as a child and using the named slot slot="file-select" attribute or property.

This is really handy if, for example, you already have a .btn class or similar that styles buttons in your application. For example:

<style>
  .btn {
    /* your styles for .btn */
    padding: 6px 8px;
    border: 1px solid #0d9488;
    border-radius: 5px;
    font-size: 24px;
    color: white;
    background: deeppink;
    cursor: pointer;
  }
</style>

<!-- slot="file-select" tells mux-uploader to replace the default file selector with a button.btn element -->
<mux-uploader endpoint="https://httpbin.org/put">
  <button class="btn" type="button" slot="file-select">Pick a file</button>
</mux-uploader>

The same applies to the React version of the component, <MuxUploader/>, as it's just a wrapper around the web component:

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

export default function App() {
  return (
    <MuxUploader endpoint="https://httpbin.org/put">
      <button
        slot="file-select"
        type="button"
        style={{
          /* your styles for .btn */
          padding: '6px 8px',
          border: '1px solid #0d9488',
          borderRadius: 5,
          fontSize: 24,
          color: 'white',
          background: 'deeppink',
          cursor: 'pointer',
        }}
      >Pick a file</button>
    </MuxUploader>
  );
}

Style with CSS

The Mux Uploader element, <mux-uploader>, can be styled and positioned with CSS just like you would any other HTML element. For example:

<style>
  mux-uploader {
    display: inline-flex;
    width: 350px;
    height: 275px;
    color: white;
    background: hotpink;
    font-family: "Gill Sans", sans-serif;
  }
</style>

<!-- slot="file-select" tells mux-uploader to replace the default file selector with a button.btn element -->
<mux-uploader endpoint="https://httpbin.org/put"></mux-uploader>

Because Mux Uploader React is a wrapper around the HTML element, the same applies to it as well:

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

export default function App() {
  return (
    <MuxUploader
      endpoint="https://httpbin.org/put"
      style={{
        display: 'inline-flex',
        width: 350,
        height: 275,
        color: 'white',
        background: 'hotpink',
        fontFamily: '"Gill Sans", sans-serif',
      }}
    />
  );
}

Use CSS variables for additional styling

In addition to styling with standard CSS, Mux Uploader exposes some additional styles via CSS variables. This allows you to tweak some of the "under the hood" subcomponents' styles simply. These include:

Building off of the prior examples, you can use these just like you would other CSS variables:

<style>
  mux-uploader {
    --overlay-background-color: purple;
    --progress-bar-fill-color: purple;
    --progress-percentage-display: none;
    display: inline-flex;
    width: 350px;
    height: 275px;
    color: white;
    background: hotpink;
    font-family: "Gill Sans", sans-serif;
  }
</style>

<!-- slot="file-select" tells mux-uploader to replace the default file selector with a button.btn element -->
<mux-uploader endpoint="https://httpbin.org/put"></mux-uploader>

And for React:

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

export default function App() {
  return (
    <MuxUploader
      endpoint="https://httpbin.org/put"
      style={{
        '--overlay-background-color': 'purple',
        '--progress-bar-fill-color': 'purple',
        '--progress-percentage-display': 'none',
        display: 'inline-flex',
        width: 350,
        height: 275,
        color: 'white',
        background: 'hotpink',
        fontFamily: '"Gill Sans", sans-serif',
      }}
    />
  );
}

Use uploader attributes for state-driven styling

Mux Uploader uses read-only properties and attributes to manage and advertise different state changes during the upload process.

These are:

• (none) - Upload has not yet begun
• upload-in-progress - Upload is currently in progress. NOTE: This includes while the upload is paused.
• upload-complete - Upload has completed.
• upload-error - An error occurred while attempting to upload.

These allow you to use attribute selectors if you want state-driven, dynamic styling via CSS.

Here's a basic example of these in action that builds off of the prior examples:

<style>
  mux-uploader {
    --overlay-background-color: purple;
    --progress-bar-fill-color: purple;
    --progress-percentage-display: none;
    display: inline-flex;
    width: 350px;
    height: 275px;
    color: white;
    background: hotpink;
    font-family: "Gill Sans", sans-serif;
  }

  mux-uploader[upload-in-progress] {
    background: orange;
  }

  mux-uploader[upload-complete] {
    background: green;
  }
</style>

<!-- slot="file-select" tells mux-uploader to replace the default file selector with a button.btn element -->
<mux-uploader endpoint="https://httpbin.org/put"></mux-uploader>

Styling in React

If you're using React to build your application, there are some common patterns used in React that are less likely to be relevant for the web component version. Below are a couple of these.

Using CSS modules

One common pattern for styling in React is to use CSS-in-JS, for example, using CSS modules:

import styles from "./Styles.module.css";
import MuxUploader from "@mux/mux-uploader-react";

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

Using Tailwind CSS

Another common approach to styling React applications is using Tailwind CSS. Here's an example for Mux Uploader approximating the previous examples, including CSS variables via arbitrary properties and attribute selectors via arbitrary variants:

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

// Declaring the tailwind classes as an array for legibility
const stylesList = [
  'inline-flex',
  'w-4/5',
  'h-4/5',
  'font-sans',
  'text-white',
  'bg-pink-400',
  '[--progress-percentage-display:none]',
  '[--overlay-background-color:purple]',
  '[--progress-bar-fill-color:purple]',
  '[&[upload-in-progress]]:bg-orange-500',
  '[&[upload-complete]]:bg-green-500',
];

const stylesStr = stylesList.join(' ');

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