<mux-uploader/>
Introduction
<mux-uploader></mux-uploader> is web component for uploading files to Mux.
mux-uploader-drop is an optional supporting web component for drop-in drag and drop and overlay. You can always configure your own drag and drop with mux-uploader.
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-elements/mux-uploader
or
npm i @mux-elements/mux-uploader
Then, import the library into your application with either import or require:
import '@mux-elements/mux-uploader';or
require('@mux-elements/mux-uploader');CDN option
Alternatively, use the CDN hosted version of this package:
<script src="https://unpkg.com/@mux-elements/mux-uploader@0.1.0-beta.0"></script>If you are using ECMAScript modules, you can also load the mux-uploader.mjs file with type=module:
<script type="module" src="https://unpkg.com/@mux-elements/mux-uploader@0.1.0-beta.0/dist/mux-uploader.mjs"></script>Usage
<body>
<p></p>
<mux-uploader
url="authenticated-url"
id="uploader"
></mux-player>
</body>Attributes
mux-uploader
| Attribute | Type | Description | Default |
|---|---|---|---|
url |
string |
The authenticated URL that your file will be uploaded to. Check out the direct uploads docs for how to create one. Required. | undefined |
id |
string |
An ID that allows mux-uploader-drop to locate mux-uploader. Required. |
N/A |
type |
"bar" |
Specifies the visual type of progress bar. A radial type is in-progress. | "bar" |
upload-in-progress |
boolean |
The thumbnail token for signing the poster URL. |
false |
upload-error |
boolean |
The storyboard token for signing the storyboard URL. | false |
status |
boolean |
This is an arbitrary title for your video that will be passed in as metadata into Mux Data. Adding a title will give you useful context in your Mux Data dashboard. (optional, but encouraged) | false |
mux-uploader-drop
| Attribute | Type | Description | Default |
|---|---|---|---|
fullscreen |
boolean |
Toggles fullscreen drag and drop (work-in-progress). | false |
overlay |
boolean |
Toggles fullscreen overlay on dragover. | false |
disable-drop |
booleann |
Toggles off drag and drop which is enabled by default. | false |
Methods
| Method | Description |
|---|---|
handleUpload() |
Begins upload of the media. |
Styling
mus-uploader can be styled with CSS variables.
Elements
<mux-uploader/>
| Name | CSS Property | Default Value | Description | Notes |
|---|---|---|---|---|
--uploader-font-family |
font-family |
Arial |
font family of the component | Applies to other elements as well: upload status and error status |
--uploader-font-size |
font-size |
16px |
font size for text within the component | Also applies to <mux-uploader-drop> i.e. overlay text |
--uploader-background-color |
background-color |
inherit |
background color of area surrounding the upload | |
--button-background-color |
background |
#fff |
background color of upload button | |
--button-border-radius |
border-radius |
4px |
border ardius of the upload button | |
--button-hover-text |
color |
#fff |
text color of upload button on button hover | |
--button-hover-background |
background |
#404040 |
background color of upload button on button hover | |
--button-active-text |
color |
#fff |
color of upload button text when button is active | |
--button-active-background |
background |
#000000 |
background color of upload button when button is active | Applied via :active pseudo selector
|
--progress-bar-fill-color |
background |
#000000 |
background color for progress bar div | |
--progress-radial-fill-color |
stroke |
black |
stroke color for circle SVG (wip) |
<mux-uploader-drop/>
| Name | CSS Property | Default Value | Description | Notes |
|---|---|---|---|---|
--overlay-background-color |
background-color |
rgba(226, 253, 255, 0.95) |
background color of the overlay div | Visible only when component has fullscreen attribute |