Drag and Drop Example

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

autoProceed is on

Uploaded files:

autoProceed is off

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

<section class="example-one">
  <h5>autoProceed is on</h5>

  <!-- Target DOM node #1 -->
  <div class="for-DragDrop"></div>

  <!-- Progress bar #1 -->
  <div class="for-ProgressBar"></div>

  <!-- Uploaded files list #1 -->
  <div class="uploaded-files">
    <h5>Uploaded files:</h5>
    <ol></ol>
  </div>
</div>

<section class="example-two">
  <h5>autoProceed is off</h5>

  <!-- Target DOM node #2 -->
  <div class="for-DragDrop"></div>

  <!-- Progress bar #2 -->
  <div class="for-ProgressBar"></div>

  <button class="upload-button">Upload</button>

  <!-- Uploaded files list #2 -->
  <div class="uploaded-files">
    <h5>Uploaded files:</h5>
    <ol></ol>
  </div>
</div>

Along with this JavaScript:

import Uppy from '@uppy/core'
import DragDrop from '@uppy/drag-drop'
import ProgressBar from '@uppy/progress-bar'
import Tus from '@uppy/tus'

// Function for displaying uploaded files
const onUploadSuccess = (elForUploadedFiles) => (file, response) => {
  const url = response.uploadURL
  const fileName = file.name

  const li = document.createElement('li')
  const a = document.createElement('a')
  a.href = url
  a.target = '_blank'
  a.appendChild(document.createTextNode(fileName))
  li.appendChild(a)

  document.querySelector(elForUploadedFiles).appendChild(li)
}

const uppyOne = new Uppy({ debug: true, autoProceed: true })
uppyOne
  .use(DragDrop, { target: '.example-one .for-DragDrop' })
  .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
  .use(ProgressBar, { target: '.example-one .for-ProgressBar', hideAfterFinish: false })
  .on('upload-success', onUploadSuccess('.example-one .uploaded-files ol'))

const uppyTwo = new Uppy({ debug: true, autoProceed: false })
uppyTwo
  .use(DragDrop, { target: '.example-two .for-DragDrop' })
  .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
  .use(ProgressBar, { target: '.example-two .for-ProgressBar', hideAfterFinish: false })
  .on('upload-success', onUploadSuccess('.example-two .uploaded-files ol'))

const uploadBtn = document.querySelector('.example-two button.upload-button')
uploadBtn.addEventListener('click', () => {
  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 v3.3.1, but the example pages reflect the latest work in our main branch. Here's what changed in main since v3.3.1 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 every 24-72 hours.

Examples

File Processing

Drag and Drop Example

autoProceed is on

Uploaded files:

autoProceed is off

Uploaded files: