Installations
npm install @mux-elements/mux-uploaderDeveloper Guide
Typescript
Yes
Module System
CommonJS, ESM, UMD
Node Version
14.20.0
NPM Version
lerna/4.0.0/node@v14.20.0+x64 (linux)
Score
74.7
Supply Chain
97.8
Quality
80.9
Maintenance
100
Vulnerability
100
License
Releases
@mux/playback-core: v0.28.2
Published on 20 Dec 2024
@mux/mux-video-react: v0.24.2
Published on 20 Dec 2024
@mux/mux-video: v0.24.2
Published on 20 Dec 2024
@mux/mux-uploader-react: v1.1.1
Published on 20 Dec 2024
@mux/mux-uploader: v1.1.1
Published on 20 Dec 2024
@mux/mux-player-react: v3.2.4
Published on 20 Dec 2024
Contributors
Languages
TypeScript (53.61%)
JavaScript (33.1%)
HTML (12.07%)
CSS (1.21%)
Shell (0.01%)
Developer
Download Statistics
Total Downloads
934
Last Day
2
Last Week
5
Last Month
19
Last Year
112
GitHub Statistics
276 Stars
1,379 Commits
51 Forks
15 Watching
5 Branches
44 Contributors
Bundle Size
35.90 kB
Minified
11.78 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
0.1.0-beta.2
Package Id
@mux-elements/mux-uploader@0.1.0-beta.2
Unpacked Size
683.34 kB
Size
191.71 kB
File Count
31
NPM Version
lerna/4.0.0/node@v14.20.0+x64 (linux)
Node Version
14.20.0
Total Downloads
Cumulative downloads
Total Downloads
934
Last day
0%
2
Compared to previous day
Last week
-28.6%
5
Compared to previous week
Last month
533.3%
19
Compared to previous month
Last year
-57.7%
112
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
<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:
1import '@mux-elements/mux-uploader';
or
1require('@mux-elements/mux-uploader');
CDN option
Alternatively, use the CDN hosted version of this package:
1<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:
1<script type="module" src="https://unpkg.com/@mux-elements/mux-uploader@0.1.0-beta.0/dist/mux-uploader.mjs"></script>
Usage
1<body> 2 <p></p> 3 4 <mux-uploader 5 url="authenticated-url" 6 id="uploader" 7 ></mux-player> 8</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 |
No vulnerabilities found.
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/cd.yml:11
Reason
Found 4/25 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/cd.yml:15
- Warn: no topLevel permission defined: .github/workflows/cd.yml:1
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/project.yml:1
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/cd.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/cd.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/cd.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/cd.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/cd.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/cd.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/cd.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/project.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/muxinc/elements/project.yml/main?enable=pin
- Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 4 third-party GitHubAction dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 18 are checked with a SAST tool
Reason
16 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-mh2x-fcqh-fmqv
- Warn: Project is vulnerable to: GHSA-rjjv-87mx-6x3h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
- Warn: Project is vulnerable to: GHSA-7m27-7ghc-44w9
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-8266-84wp-wv5c
- Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
4.3
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More