This package has been deprecated

    Author message:

    This package has moved to the @mux/mux-uploader scope. See https://www.mux.com/blog/mux-elements-are-getting-a-new-old-home-on-npm-mux for more information.

    @mux-elements/mux-uploader
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0-beta.2 • Public • Published

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

    or

    npm i @mux-elements/mux-uploader
    

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

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

    or

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

    CDN option

    Alternatively, use the CDN hosted version of this package:

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

    <script type="module" src="https://unpkg.com/@mux-elements/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

    Keywords

    none

    Install

    npm i @mux-elements/mux-uploader

    DownloadsWeekly Downloads

    93

    Version

    0.1.0-beta.2

    License

    MIT

    Unpacked Size

    700 kB

    Total Files

    31

    Last publish

    Collaborators

    • cjpillsbury
    • dylanjha
    • heff
    • luwes
    • mmcc
    • mux-npmjs