How can I use Dropzone.js in my own function

Question

I am having difficulties integrating Dropzone.js with my own ajax function, I don't know what I should do to use dropzone inside my ajax function.

This is my own ajax function code :

function _ajaxForm(formHandler){
var action = $(formHandler).attr('action');
$.post(action, $(formHandler).serialize(), function(data){
    // I want to submit my fields and my form upload using this function
}, 'json');}

Can you elaborate what you are trying to do. – thedudecodes May 27 '19 at 04:15 — thedudecodes, May 27 '19 at 04:15
how can i integrate dropzone inside this function – May 27 '19 at 04:21 — , May 27 '19 at 04:21

jhhwilliams · Answer 1 · 2019-05-27T04:45:16.393

You just need to configure your dropzone accordingly.

Using the sending event you could do something like this:

Dropzone.options.myAwesomeDropzone = {
  // Some default configurations
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  // Additional configurations needed for your ajax call
  url: "insertyoururlhere",
  init: function () {
      this.on("error", function (error, message) {
        //do something to handle the error
      });
      this.on("success", function (success, response) {
        //do something
      });
      this.on("sending", function (file, xhr, formData) {
        //add any form data that you would have in your ajax function eg:
        //formData.append("id", 123);
      });
      this.on("complete", function () {
        this.removeAllFiles(true);
        //do something
      });
    }
});

See this, this and this answer which might also help.

How can I use Dropzone.js in my own function

1 Answers1