Dropzone Js Onclick Submit File Upload

upload all files with a single button click. HTML:

<

Solution 1:

use simple code

Dropzone.autoDiscover = false;

var myDropzone = newDropzone(element, {
  url: "/upload.php",                        
  autoProcessQueue: false,
});

$('#imgsubbutt').click(function(){           
  myDropzone.processQueue();
});

Solution 2:

I accomplished this by placing my dropzone in a div instead of a form, thereby removing the ability for dropzone to automatically POST the uploads to a given URL. The URL I passed to the dropzone instance when I created it is literally 'dummy' since it will never be called. For example, HTML

<buttonid="submit-all">Submit all files</button><divclass="dropzone"id="my-dropzone"></div>

JavaScript

$('#submit-all').on('click', function() {
    var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles();
    // Do something with the files.
});

Solution 3:

Here how i implement delayed uploading (initiated by click on any button, for an example):

Dropzone implementation

var count = 0;
var addedFilesHash = {};
var myDropzone = newDropzone("#file_upload-form", {
    paramName: "file", // The name that will be used to transfer the fileaddRemoveLinks: true,
    maxFilesize: 5, // MBparallelUploads: 5,
    uploadMultiple: true,
    acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
    maxFiles: 10,
    init: function() {
        this.on("removedfile", function (file) {
            // delete from our dict removed filedelete addedFilesHash[file];
        });
    },
    accept: function(file, done) {
        var _id = count++;
        file._id = _id;
        addedFilesHash[_id] = done;
    }
});

Somewhere else

// get all uploaded files in arrayvar addedFiles = Object.keys(addedFilesHash);
    // iterate themfor (var i = 0; i< addedFiles.length; i++) {
        // get file objvar addedFile = addedFiles[i];
        // get done functionvar doneFile = addedFilesHash[addedFile];
        // call done function to upload file to serverdoneFile();
    }

We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.

Solution 4:

I got just finished messing around with this myself- I wanted to add information about the image to a database at the same time as uploading it. Dropping a file opens the input form for the extra info and then the queue needs sending after the form button is pressed.

I finally achieved this by putting a jquery click event handler inside the init 'on add file' function event:

this.on("addedfile", function(file){
  var myDropzone = this;
  $('#imageinfoCont').animate({left:'4.5%'});//brings form in
  $('#imgsubbutt').click(function(){
    $('#imageinfoCont').animate({left:'-10000px'}); //hides the form again
    myDropzone.processQueue(); //processes the queue
  });
});

I am then adding the extra data in a separate 'on sending' function event (could probably do it in the above code but baby steps I think).

Seems to work like a charm.

Solution 5:

Although this has been answered, I ran into a situation where I only wanted to submit the queue IF it was a certain type of file. The bug I ran into was it was ignoring processQueue.

this.dropzone = newDropzone('#my-dropzone', {
    autoProcessQueue: false,
  });
  returnthis.dropzone.on('addedfile', (function(_this) {
    returnfunction(file) {

      varIMAGE_EXTENSIONS, ext;
      IMAGE_EXTENSIONS = 'png jpg jpeg gif'.split(' ');
      ext = (_.last(file.name.split('.'))).toLowerCase();

      if (_.include(IMAGE_EXTENSIONS, ext)) {
        returnconsole.log('IMAGE!');
      } else {

        returnsetTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!return _this.dropzone.processQueue();
        }, 10);
      }
    };
  })(this));

I had to use the setTimeout seen above because processQueue did nothing if I didn't defer it in this manner.