Uppy is an open source project by Transloadit

Drag and Drop Example

Here you’ll see a demo of how you might set up Drag and Drop with Uppy.

autoProceed is on
autoProceed is off

Console output:

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

<!-- Basic Uppy styles -->
<link rel="stylesheet" href="/uppy/uppy.min.css">

<div>
  <div>
    <h5>autoProceed is on</h5>

    <!-- Target DOM node #1 -->
    <div class="UppyDragDrop-One"></div>

    <!-- Progress bar #1 -->
    <div class="UppyDragDrop-One-Progress"></div>
  </div>

  <div>
    <h5>autoProceed is off</h5>

    <!-- Target DOM node #2 -->
    <div id="UppyDragDrop-Two"></div>

    <!-- Progress bar #2 -->
    <div class="UppyDragDrop-Two-Progress"></div>

    <button class="UppyDragDrop-Two-Upload">Upload</button>
  </div>
</div>

Along with this JavaScript:

require('es6-promise/auto')
require('whatwg-fetch')
const Uppy = require('@uppy/core')
const DragDrop = require('@uppy/drag-drop')
const ProgressBar = require('@uppy/progress-bar')
const Tus = require('@uppy/tus')

const uppyOne = new Uppy({debug: true, autoProceed: true})
uppyOne
  .use(DragDrop, {target: '.UppyDragDrop-One'})
  .use(Tus, {endpoint: 'https://master.tus.io/files/'})
  .use(ProgressBar, {target: '.UppyDragDrop-One-Progress', hideAfterFinish: false})

const uppyTwo = new Uppy({debug: true, autoProceed: false})
uppyTwo
  .use(DragDrop, {target: '#UppyDragDrop-Two'})
  .use(Tus, {endpoint: 'https://master.tus.io/files/'})
  .use(ProgressBar, {target: '.UppyDragDrop-Two-Progress', hideAfterFinish: false})

var uploadBtn = document.querySelector('.UppyDragDrop-Two-Upload')
uploadBtn.addEventListener('click', function () {
  uppyTwo.upload()
})

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.2.0, but the example pages reflect the latest work in our master branch. Here's what changed in master since v1.2.0 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.