JSPM

@mux/mux-uploader-react

0.1.0-canary.10-fc4a74c
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8011
  • Score
    100M100P100Q145134F
  • License MIT

An uploader element for React that handles Mux Direct Uploads and a visual progress bar for you

Package Exports

  • @mux/mux-uploader-react
  • @mux/mux-uploader-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mux/mux-uploader-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<MuxUploader/>

Downloads Version License

Introduction

<MuxUploader> is React component for uploading files to Mux.

<MuxUploaderDrop> is an optional supporting React component for drop-in drag and drop and overlay. You can always configure your own drag and drop with <MuxUploader>.

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-react

or

npm i @mux/mux-uploader-react

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

import '@mux/mux-uploader-react';

or

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

Usage

const MuxUploaderWithMuxUploaderDropExample = () => {
  return (
    <div>
      <h1>Simple MuxUploader and Mux Uploader Drop Examples</h1>
      {/* Upload button by itself. Displays upload progress in text as percentage. */}
      <MuxUploader url="authenticated-url" type="bar" status></MuxUploader>

      {/* Upload button by itself. Does not display text percentage. */}
      <MuxUploader url="authenticated-url" type="bar"></MuxUploader>

      {/* Upload button with access to optional supplentary drag and drop features. */}
      <MuxUploaderDrop mux-uploader="uploader">
        <MuxUploader url="authenticated-url" id="uploader"></MuxUploader>
      </MuxUploaderDrop>
    </div>
  );
};

Props

<MuxUploader>

Property 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 <MuxUploaderDrop> to locate <MuxUploader>. Required if you use <MuxUploaderDrop>. N/A
type "bar" Specifies the visual type of progress bar. A radial type is in-progress. "bar"
status boolean Toggles 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
formatProgress function A function that accepts numeric percent and is expected to return a string. Allows for customizing how the progress should be rendered. A function the yields a percent progress string

<MuxUploaderDrop>

Property Type Description Default
overlay boolean Toggles fullscreen overlay on dragover. false
overlayText boolean Optional text to display on dragover when overlay is on. ''
muxUploader string Must match the id on <MuxUploader>. Required. N/A

Callbacks

<MuxUploader>

<MuxUploader> has a handful of events to monitor uploading state.

Prop Description
onError Invoked when an error occurs in the chunked upload process.
onProgress Invoked whenever a chunk of the file has successfully completed uploading.
onSuccess Invoked when the entire file has successfully completed uploading.