CODEWITHSUNDEEP
javascripthtmldropzone.js
Ehsan Abidi
Ehsan Abidi

Reputation: 959

Dropzone class .dz-started & click problems when "previewsContainer" option has been set

I use the JavaScript Dropzone.js on my Web page with following code:

Dropzone.options.myDropzone = { 
  previewsContainer: ".dropzone-previews", // ?dz-started
};
<form action="assets/plugins/dropzone/upload.php" class="dropzone" id="my-dropzone">
  <button type="submit" class="btn btn-lg btn-success">ارسال فایل</button>
  <div class="dropzone-previews"></div>               
</form>

I need to do this configuration because the page which I am try to install Dropzone on it,is a working page which I want to maintain previous codes as much as possible. but with this configuration 2 problems arises:
1- When I add a file to Dropzone, the "dz-started" css class, would not add to html dropzone element and in consequence the message "drop file here. . . " don`t disapear.
2- When I add multiple files to Dropzone, from that moment some of my clicks around file thumbnails, do not opens the file dialogue.
please help me, thank you.

Upvotes: 0

Views: 1452

Answers (1)

wallek876
wallek876

Reputation: 3269

Not sure if this is what you are looking for but if you only need the regular behavior of dropzone and a button to submit the images dropped, you can just use a form without previews container and put the submit button outside like this:

html:

<form action="assets/plugins/dropzone/upload.php" class="dropzone" id="my-dropzone"></form>
<button id="dzsubmit" type="button" class="btn btn-lg btn-success">ارسال فایل</button>

The button id is just to target it easily in case you have more buttons in the page.

js:

Dropzone.options.myDropzone = { 
    autoProcessQueue: false,
    uploadMultiple: true,
    init: function() {
        var myDropzone = this;
        var submitButton = document.querySelector("#dzsubmit");
        submitButton.addEventListener("click", function () {
            myDropzone.processQueue(); 
        });
    }
};

Upvotes: 2

Related Questions