Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@mux/mux-uploader

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mux/mux-uploader

An uploader elements to be used with Mux Direct Uploads

0.1.0-canary.0-556dabf
Source
npm

Version published: 3 years ago

Weekly downloads: 3.8K; increased by122.04%

Maintainers: 44

Weekly downloads

Created: 3 years ago

Source

<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/mux-uploader

npm i @mux/mux-uploader

Then, import the library into your application with either import or require:

import '@mux/mux-uploader';

require('@mux/mux-uploader');

CDN option

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>

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

FAQs

What is @mux/mux-uploader?

Is @mux/mux-uploader popular?

Is @mux/mux-uploader well maintained?

Package last updated on 28 Jun 2022

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.

Install