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

@mux/mux-uploader

Package Overview
Dependencies
Maintainers
2
Versions
542
Alerts
File Explorer

Advanced tools

Socket logo

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.10-bf06ff9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4K
decreased by-15.45%
Maintainers
2
Weekly downloads
 
Created
Source

<mux-uploader/>

Downloads Version License

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

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

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>
  <!-- Upload button by itself with default drag an drop scoped to the space it takes up. Displays upload progress in text as percentage.-->
  <mux-uploader url="authenticated-url" type="bar" status></mux-uploader>

  <!-- Upload button by itself with drag an drop disabled. Does not display text percentage.-->
  <mux-uploader url="authenticated-url" type="bar" disable-drop></mux-uploader>

  <!-- Upload button with access to additional drag and drop features via slots i.e. fullscreen drag and drop with text overlay (work-in-progress).-->
  <mux-uploader url="authenticated-url">
    <mux-uploader-drop slot="dropzone" text="Upload to stream.new" fullscreen overlay></mux-uploader-drop>
  </mux-uploader>
</body>

Drag and Drop

The mux-uploader, whether you use mux-uploader-drop and its additional features or not i.e. fullscreen and text overlay, has basic drag and drop functionality available to it by default. If you'd rather shop your own drag and drop solution, you can disable the default drag and drop on mux-uploader and dispatch a custom file-ready event when you need to upload. mux-uploader will handle the upload upon receiving the event.

<script>
  const muxUploader = document.querySelector('mux-uploader');

  // Dispatch custom event to trigger upload
  muxUploader.dispatchEvent(
    new CustomEvent('file-ready', {
      composed: true,
      bubbles: true,
      detail: file,
    })
  );
</script>

Attributes

mux-uploader
AttributeTypeDescriptionDefault
urlstringThe authenticated URL that your file will be uploaded to. Check out the direct uploads docs for how to create one. Required.undefined
idstringAn ID that allows mux-uploader-drop to locate mux-uploader. Not necessary unless the unlikely scenario you need to nest mux-uploader inside mux-uploader-drop.N/A
type"bar"Specifies the visual type of progress bar. A radial type is in-progress."bar"
upload-in-progressbooleanToggles visual status of progress bar while upload is in progress. Can be targeted with CSS if you want to control styles while in progress i.e. mux-uploader[upload-in-progress].false
upload-errorbooleanToggles visual status of progress bar when upload encounters an error. Can be targeted with CSS if you want to control styles when an error occurs i.e. mux-uploader[upload-error].false
statusbooleanToggles text status visibility of progress bar. The text that is displayed is a percentage by default. If you prefer just the progress bar with no text upload status, don't include this attribute.false
mux-uploader-drop
AttributeTypeDescriptionDefault
fullscreenbooleanToggles fullscreen drag and drop (work-in-progress).false
overlaybooleanToggles fullscreen overlay on dragover.false
disable-drop booleanToggles off drag and drop which is enabled by default.false

Methods

MethodDescription
handleUpload()Begins upload of the media.

Styling

mux-uploader can be styled with CSS variables.

Elements
  • <mux-uploader/>
NameCSS PropertyDefault ValueDescriptionNotes
--uploader-font-familyfont-familyArialfont family of the componentApplies to other elements as well: upload status and error status
--uploader-font-sizefont-size16pxfont size for text within the componentAlso applies to <mux-uploader-drop> i.e. overlay text
--uploader-background-colorbackground-colorinheritbackground color of area surrounding the upload
--button-background-colorbackground#fffbackground color of upload button
--button-border-radiusborder-radius4pxborder ardius of the upload button
--button-hover-textcolor#ffftext color of upload button on button hover
--button-hover-backgroundbackground#404040background color of upload button on button hover
--button-active-textcolor#fffcolor of upload button text when button is active
--button-active-backgroundbackground#000000background color of upload button when button is activeApplied via :active pseudo selector
--progress-bar-fill-colorbackground#000000background color for progress bar div
--progress-radial-fill-colorstrokeblackstroke color for circle SVG (wip)
  • <mux-uploader-drop/>
NameCSS PropertyDefault ValueDescriptionNotes
--overlay-background-colorbackground-colorrgba(226, 253, 255, 0.95)background color of the overlay divVisible only when component has fullscreen attribute

FAQs

Package last updated on 07 Jul 2022

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc