This package has been deprecated

    Author message:

    This package has moved to the @mux/mux-uploader scope. See for more information.

    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0-beta.2 • Public • Published


    Downloads Version License


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


    If you're using npm or yarn, install that way:

    Package manager

    yarn add @mux-elements/mux-uploader


    npm i @mux-elements/mux-uploader

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

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



    CDN option

    Alternatively, use the CDN hosted version of this package:

    <script src=""></script>

    If you are using ECMAScript modules, you can also load the mux-uploader.mjs file with type=module:

    <script type="module" src=""></script>





    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


    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


    Method Description
    handleUpload() Begins upload of the media.


    mus-uploader can be styled with CSS variables.


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




    npm i @mux-elements/mux-uploader

    DownloadsWeekly Downloads






    Unpacked Size

    700 kB

    Total Files


    Last publish


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