javascripthtmlfile-uploaddropzone.jsmultiple-file-upload

Dropzone.js - uploading only 1 file multiple times on multiple file upload


I'm using Dropzone.js to submit a bunch of files with other form elements, as highlighted on https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone, however, on dragging multiple different files in the dropzone and submitting the form, it turns out that only one of them is uploaded. I'm also keeping track of files uploaded in my database, and it seems that depending of the number of files dragged into the dropzone for upload, a single file was being uploaded that many number of times. E.g: I drag 5 diff images with diff filenames into the dropzone, one of them being 'sunshine.jpg', it turns out 'sunshine.jpg' was recorded in the database 5 times. On further probing, I found out via the Network Panel in the Chrome dev tools, only one file was being sent multiple times in an array in the request header. Been troubleshooting for a while, to not much avail. Any insights would be appreciated.

Condensed HTML:

<form action="" method="post" enctype="multipart/form-data" novalidate class="dropzone" id="mydropzone" name="create-form">
<div class="input-group" id="whatever">
   <div id="dropzonePreview">
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </div> 
</div>
...Other form elements
<input style="margin-bottom:15px;" id="btn_main_2" type="button" name="create" value='<?php echo $create_button; ?>' class="btn btn-large btn-success">
</form>

JavaScript:

Dropzone.options.mydropzone = { 
          url: 'Modules/global/module-fileuploads-dropzone.2.php', 
          addRemoveLinks: true,
          autoProcessQueue: false, 
          autoDiscover: false,
          paramName: 'file', 
          previewsContainer: '#dropzonePreview', 
          clickable: false, 
          uploadMultiple: true,
          parallelUploads: 100,
          maxFiles: 100,
          accept: function(file, done) {
            console.log("uploaded file");
            done();
          },
         error: function(file, msg){
            alert(msg);
          },
          init: function() {

              var myDropzone = this;

            $("#btn_main_2").on('click',function(e) {
               e.preventDefault();
               myDropzone.processQueue(); 

            });

          } 

        };

Screenshot of Network Log:

Network Log - Request Header


Solution

  • On further troubleshooting, I found the solution to this problem is considerably simple:

    paramName: 'file[]'
    

    instead of

    paramName: 'file'
    

    since we are dealing with an array of files in this case. Looks like one cannot ignore that while specifying an array as parameter.