/ JavaScript

DropzoneJS: upload items with delay between them

Dropzone is a great product: include their JS and you have a working drag-n-drop enabled multiupload form.

Some days ago, I had the need to upload multiple files, but one per (at least) second, because in the server side I put a timestamp in seconds near the image and it would be the same for every item uploaded. Since I couldn't switch to milliseconds' timestamps and Dropzone doesn't have a built-in function to create delay between uploads, I found out this solution, thanks also to some Stackoverflow answer.

Note that this code won't work if you use autoProcessQueue, because we don't know when users finished to choose its files, so we init the uploads from a button.

Basic HTML

In our HTML we need to include the CSS (https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css) and the JS (https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js).

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css" />
    <title>Our magic Dropzone</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
</body>
</html>

Now, let's create a form where Dropzone will be available.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css" />
    <title>Our magic Dropzone</title>
</head>
<body>
    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

    <button id="submit-files">Upload</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
</body>
</html>

Since Dropzone has autodiscovery enabled by default, it will be immediately working; we are going to disable this in order to create our DZ instance to use its method. We also added a button which will trigger the upload of the files.

JavaScript

We need to do adjust the settings of our Dropzone form and initialize it programmatically, disabling the autoDiscover functionality and disabling the autoqueue, otherwise selected files are automatically uploaded.

Dropzone.autoDiscover = false
const myDropzone = new Dropzone('#my-awesome-dropzone', {
  autoProcessQueue: false
})

Now it's time to connect the button: when clicked, it will fetch all the files inside our form and, with the processFile method of DZ, we'll tell to Dropzone which file to process.

const $button = document.getElementById('submit-files')
$button.addEventListener('click', function () {
  // Retrieve selected files
  const acceptedFiles = myDropzone.getAcceptedFiles()
  for (let i = 0; i < acceptedFiles.length; i++) {
    myDropzone.processFile(acceptedFiles[i])
  }
})

If you try to click the button, the files will be uploaded, but it works like the default Dropzone, so are going to add a timeout inside the for loop, where the milliseconds of timeout will be the current index * our desired delay, for example 2000 (2 seconds).

const $button = document.getElementById('submit-files')
$button.addEventListener('click', function () {
  // Retrieve selected files
  const acceptedFiles = myDropzone.getAcceptedFiles()
  for (let i = 0; i < acceptedFiles.length; i++) {
    setTimeout(function () {
      myDropzone.processFile(acceptedFiles[i])
    }, i * 2000)
  }
})

What will happen now? The first file will be processed instantly, because its index is 0 and 0x2000 = 0; the second file will be processed after 2s, the third after 4s from the first file, which means it will be uploaded after 2s from the second file.

Example
Delay upload example

To check if it correctly works, we can log in the console the current time in the timeout. This would be the output (the upload endpoint doesn't exists in my case):

dropzone-delay-upload-example

Final code and working demo

The final code, putting all together, will be this.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css" />
    <title>Our magic Dropzone</title>
</head>
<body>
    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

    <button id="submit-files">Upload</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
    <script>
    // Init dropzone instance
    Dropzone.autoDiscover = false
    const myDropzone = new Dropzone('#my-awesome-dropzone', {
      autoProcessQueue: false
    })

    // Submit
    const $button = document.getElementById('submit-files')
    $button.addEventListener('click', function () {
      // Retrieve selected files
      const acceptedFiles = myDropzone.getAcceptedFiles()
      for (let i = 0; i < acceptedFiles.length; i++) {
        setTimeout(function () {
          myDropzone.processFile(acceptedFiles[i])
        }, i * 2000)
      }
    })
    </script>
</body>
</html>

You can see a working demo within this CodePen or here below.

Danilo Polani

Danilo Polani

Software Engineer and dreamer in startups. Go, Python, Laravel, Ionic, AngularJS, VueJS, NodeJS, JavaScript, Elasticsearch, Redis.

Read More