Dropzone.js inside Modal not working

Question

I use dropzone.js to upload files to the server. I included js and css files, and the “drag and drop zone” is located within the modal window that opens with the click of a button (the modal contains more elements that are not relevant here)

The problem I am facing is that inside the modal dialog the "add file" section does not start. When you click on it, nothing happens, and I can not drag and drop files.

I saw a similar problem in another thread, but the solutions provided there did not work for me ( here : Using Dropzone.js inside the Bootstrap mod ). I searched for an answer for several days with no luck. Any ideas would be welcome.

This is my code.

CSHTML:

[...] <div class="W100pc"> <div class="FormUnit W045pc AdjustedWidth"> <div id="DropzoneElement" class="dropzone"> <div class="dz-message">Add file here</div> </div> </div> </div> [...] 

JS:

 [...] $(document).ready(function() { Dropzone.autoDiscover = false; //Simple Dropzonejs $("#DropzoneElement").dropzone({ maxFilesize: 100, url: window.doSomethingHere, addRemoveLinks: true, success: function(file, response) { var imgName = response; file.previewElement.classList.add("dz-success"); console.log("Successfully uploaded :" + imgName); }, error: function(file, response) { file.previewElement.classList.add("dz-error"); } }); } [...] 

Thank you for your help.

Answer 1

You must subscribe to the shown.bs.modal event, this event will be fired when the modal image becomes visible to the user. Initialize Dropzone in this case.

 $('#myModal').on('shown.bs.modal', function (e) { // Initialize Dropzone });