<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
| 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) | |
| 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 |
