Learn how to customize the look and feel of Mux Uploader to fit your brand and use case.
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.
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 pausible
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:
Below are examples of what this looks like in the UI.
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.
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.
Note: There are two likely cases where you may want to disable drag and drop on Mux Uploader:
Mux Uploader also provides attributes and properties to disable:
no-progress
/ noProgress
for the web component attribute / property, noProgress
for the React prop)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.
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:
The same applies to the React version of the component, <MuxUploader/>
, as it's just a wrapper around the web component:
The Mux Uploader element, <mux-uploader>
, can be styled and positioned with CSS just like you would any other HTML element. For example:
Because Mux Uploader React is a wrapper around the HTML element, the same applies to it as well:
A couple of notes here:
display: inline-flex
instead of potentially changing it to inline
or inline-block
.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:
Name | CSS Property | Default Value | Description |
---|---|---|---|
--overlay-background-color | background-color | rgba(226, 253, 255, 0.95) | background color of the drop overlay |
--progress-bar-fill-color | background | #000000 | color for progress bar |
--progress-percentage-display | display | block | display value for text percentage progress UI |
--progress-radial-fill-color | stroke | black | stroke color for radial progress (experimental) |
Building off of the prior examples, you can use these just like you would other CSS variables:
And for React:
Mux Uploader uses read-only properties and attributes to manage and advertise different state changes during the upload process.
These are:
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:
NOTE: Because Mux Uploader React is a thin wrapper around the Mux Uploader web component, you can use these exact same CSS selectors in your React application. Alternatively, some frameworks, like Tailwind CSS, have built-in support for arbitrary attribute selectors. For an example of this in use, see the section below.
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.
One common pattern for styling in React is to use CSS-in-JS, for example, using CSS modules:
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: