@mux-elements/mux-uploader
Advanced tools
<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.
If you're using npm or yarn, install that way:
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');
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>
<body>
<p></p>
<mux-uploader
url="authenticated-url"
id="uploader"
></mux-player>
</body>
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 |
| Method | Description |
|---|---|
handleUpload() | Begins upload of the media. |
mus-uploader can be styled with CSS variables.
<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 |
FAQs
An uploader elements to be used with Mux Direct Uploads
The npm package @mux-elements/mux-uploader receives a total of 2 weekly downloads. As such, @mux-elements/mux-uploader popularity was classified as not popular.
We found that @mux-elements/mux-uploader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.