1.0.0-beta.17 • Published 1 day ago

@mux/mux-uploader-react v1.0.0-beta.17

Weekly downloads
-
License
MIT
Repository
github
Last release
1 day ago

Introduction

<MuxUploader></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 with default drag an drop scoped to the space it takes up. Displays upload progress in text as percentage. */}
      <MuxUploader url="authenticated-url" type="bar" status></MuxUploader>

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

      {/* Upload button with access to additional drag and drop features via slots i.e. fullscreen drag and drop with text overlay (work-in-progress). */}
      <MuxUploader url="authenticated-url">
        <MuxUploaderDrop slot="dropzone" text="Upload to stream.new" fullscreen overlay></MuxUploaderDrop>
      </MuxUploader>
    </div>
  );
};

Attributes

MuxUploader

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 MuxUploaderDrop to locate MuxUploader. Not necessary unless the unlikely scenario you need to nest MuxUploader inside MuxUploaderDrop.N/A
type"bar"Specifies the visual type of progress bar. A radial type is in-progress."bar"
uploadInProgressbooleanToggles visual status of progress bar while upload is in progress.false
uploadErrorbooleanToggles visual status of progress bar when upload encounters an 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

MuxUploaderDrop

AttributeTypeDescriptionDefault
fullscreenbooleanToggles fullscreen drag and drop (work-in-progress).false
overlaybooleanToggles fullscreen overlay on dragover.false
disableDropbooleanToggles off drag and drop which is enabled by default.false

Methods

MethodDescription
handleUpload()Begins upload of the media.
1.0.0-beta.17

18 days ago

1.0.0-beta.16

1 month ago

1.0.0-beta.15

5 months ago

1.0.0-beta.14

6 months ago

1.0.0-beta.11

9 months ago

1.0.0-beta.12

9 months ago

1.0.0-beta.10

9 months ago

1.0.0-beta.13

9 months ago

1.0.0-beta.8

1 year ago

1.0.0-beta.9

12 months ago

1.0.0-beta.7

1 year ago

1.0.0-beta.5

1 year ago

1.0.0-beta.6

1 year ago

1.0.0-beta.3

1 year ago

1.0.0-beta.4

1 year ago

1.0.0-beta.2

2 years ago

1.0.0-beta.1

2 years ago

0.1.0-beta.9

2 years ago

0.1.0-beta.8

2 years ago

1.0.0-beta.0

2 years ago

0.1.0-beta.7

2 years ago

0.1.0-beta.6

2 years ago

0.1.0-beta.5

2 years ago

0.1.0-beta.4

2 years ago

0.1.0-beta.2

2 years ago