CODEWITHSUNDEEP
javascriptjquerydropzone.js
jimbeeer
jimbeeer

Reputation: 1695

Submitting the form after dropzone.js uploads all images

I'm using dropzone.js as part of a form all working as it should. I have it set so it doesn't process the upload queue until submit is clicked. But once it's uploaded all files I want it to submit the form. I've added the event in jQuery but it's still not submitting it.

What am I doing wrong here?

It gave me the success alert but didn't submit the form:

$(document).ready(function() {
  
  $("div#dropzone").dropzone({ 
    url: "js/dropzone/upload.php",
    autoProcessQueue: false,
    maxFilesize: 2,
    parallelUploads: 100,
    uploadMultiple: true,
    acceptedFiles: "image/*",
    maxFiles: 10,
    init: function() {
      var myDropzone = this;
      $("#theform").submit(function(e) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
      });
    },
    completemultiple: function(file, response){
      alert("success");
      $("#theform").submit();
    },
  });
});

Upvotes: 0

Views: 1593

Answers (2)

jimbeeer
jimbeeer

Reputation: 1695

I've managed to work it out. I'm sure other people will have the same problem so here is the answer. You reverse the e.preventDefault and then click the submit button with jQuery once the queue is complete:

$(document).ready(function() {

  $("div#dropzone").dropzone({ 
    url: "js/dropzone/upload.php",
    autoProcessQueue: false,
    maxFilesize: 2,
    parallelUploads: 100,
    uploadMultiple: true,
    acceptedFiles: "image/*",
    maxFiles: 10,
    init: function() {
      var myDropzone = this;
      $("#theform").submit(function(e) {
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();

      });
    },
    queuecomplete: function(file, response){
      $("#theform").unbind('submit').submit();
      $("#submit").click();
    },
  });

Upvotes: 1

Kosh
Kosh

Reputation: 18393

You might set a flag if the form can be submitted, then decide if you need to preventDefault:

$(document).ready(function() {
  
  $("div#dropzone").dropzone({ 
    url: "js/dropzone/upload.php",
    autoProcessQueue: false,
    maxFilesize: 2,
    parallelUploads: 100,
    uploadMultiple: true,
    acceptedFiles: "image/*",
    maxFiles: 10,
    init: function() {
      var myDropzone = this;
      $("#theform").submit(function(e) {
        if ($(this).prop('ready')) return true;
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
      });
    },
    completemultiple: function(file, response){
      alert("success");
      $("#theform").prop('ready', true).submit();
    },
  });
});

Upvotes: 2

Related Questions