Add an input box for each dropped file in dropzone

Question

I have a drag drop box with dropzone.js. I allow multiple files upload (max 5 files at present). I have asked to add an ability for user to add description for each uploaded file. The challenges I have:

1. Unable to determine how many files user dragged in zone
2. if I create text-boxes outside the zone, how do I tie them to each file correctly? I have set uploadMultiple to false and process one file at a time. For example user uploaded 3 images of home, store & warehouse and 1 pdf and add description of Invoices, how do I ensure that Invoices doe not end up with home or store when processing that file?

Answer 1

I accomplished something like this by using a custom template for how Dropzone shows the file in the queue. I started with this example from the Dropzone author that explains how to use a custom template when displaying files in the queue. I expanded on the example by adding an extra form input to the template.

<div class="table table-striped" class="files" id="previews">
  <div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
      <span class="preview"><img data-dz-thumbnail /></span>
    </div>
    <div>
      <p class="name" data-dz-name></p>
      <strong class="error text-danger" data-dz-errormessage></strong>
    </div>

    <!-- include a form field to collect the description -->
    <div>
      <label for="description">Description</label>
      <textarea id="description"
                data-name="description"
                rows="3"></textarea>
    </div>

    <!-- remainder of template removed for brevity -->
  </div>
</div>

Issue #1

When you add the form element, if you specify a name attribute, only the value from the form element associated with the last file will be submitted when the file uploads because you have multiple form elements all with the same name attribute.

To get around this, I did not include a name attribute but instead used a data-name attribute. Then I added the form element's value to the form data when the file got sent using this code:

myDropzone = new Dropzone('form#myuploadform')
myDropzone.on(
    'sending',
    function (file, xhr, formData) {
        let description = file.previewElement.querySelector('textarea')
        formData.append(description.getAttribute('data-name'),
                        description.value)
    }
)

Issue #2

Because the id values are specified in the template, they will be the same value for every file added to the queue which violates the HTML spec since id values must be unique. Further since the for attribute of the LABEL element references the id of the TEXTAREA this also breaks accessibility because the second and subsequent LABELs will all reference the first TEXTAREA.

I fixed this by appending the UUID value Dropzone assigns to every file object to the id and for attributes as the file is being added to the queue, which is explained in this answer.