Uppy is an open source project by Transloadit

XHR Upload Example

Uppy recommends using tus resumable file uploads, but if you want you can also use XHRUpload (Multipart Form) uploads

Simple form with a file input, mounted to a fallback <form> container — works even without JavaScript or when something goes wrong (slow connection, JS errors, old browsers):

Uppy was not loaded — slow connection, unsupported browser, weird JS error on a page — but the upload still works, because HTML is cool like that
Uploaded files:

    Console output:

    On this page we're using the following HTML snippet:

    <!-- Basic Uppy styles -->
    <link rel="stylesheet" href="/uppy/uppy.min.css">
    
    <div class="UppyForm">
      <form action="https://upload-endpoint.uppy.io/upload">
        <h5>Uppy was not loaded — slow connection, unsupported browser, weird JS error on a page — but the upload still works, because HTML is cool like that</h5>
        <input type="file" name="files[]" multiple="">
        <button type="submit">Fallback Form Upload</button>
      </form>
    </div>
    
    <div class="UppyProgressBar"></div>
    
    <!-- Uploaded files list -->
    <div class="uploaded-files">
      <h5>Uploaded files:</h5>
      <ol></ol>
    </div>

    Along with this JavaScript:

    require('es6-promise/auto')
    require('whatwg-fetch')
    const Uppy = require('@uppy/core')
    const FileInput = require('@uppy/file-input')
    const XHRUpload = require('@uppy/xhr-upload')
    const ProgressBar = require('@uppy/progress-bar')
    
    const uppy = new Uppy({ debug: true, autoProceed: true })
    uppy.use(FileInput, {
      target: '.UppyForm',
      replaceTargetContent: true
    })
    uppy.use(ProgressBar, {
      target: '.UppyProgressBar',
      hideAfterFinish: false
    })
    uppy.use(XHRUpload, {
      endpoint: 'https://upload-endpoint.uppy.io/upload',
      formData: true,
      fieldName: 'files[]'
    })
    
    // And display uploaded files
    uppy.on('upload-success', (file, response) => {
      const url = response.uploadURL
      const fileName = file.name
    
      document.querySelector('.uploaded-files ol').innerHTML +=
        `<li><a href="${url}" target="_blank">${fileName}</a></li>`
    })

    Please see documentation for details.


    Hey there stranger! Uppy is actively developed and the example section is our playground. Things might not work, but we're working hard to improve.

    We're on a monthly release cycle and our latest version is v1.5.2, but the example pages reflect the latest work in our master branch. Here's what changed in master since v1.5.2 in terms of commits, while the CHANGELOG provides a higher level view of the things planned for our next release.

    Files from the examples are uploaded to our test servers and deleted daily.