@mux/mux-uploader
Advanced tools
An uploader elements to be used with Mux Direct Uploads
<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/mux-uploader
or
npm i @mux/mux-uploader
Then, import the library into your application with either import or require:
import '@mux/mux-uploader';
or
require('@mux/mux-uploader');
Alternatively, use the CDN hosted version of this package:
<script src="https://unpkg.com/@mux/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/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/mux-uploader receives a total of 3,163 weekly downloads. As such, @mux/mux-uploader popularity was classified as popular.
We found that @mux/mux-uploader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.