Dropzone.js inside Modal does not work

Question

I'm using dropzone.js to upload files to the server. I included the js and css files and the "drag zone" is within a modal window that opens on the click of a button (the modal includes more elements that are not relevant here)

The problem I'm facing is that, inside the modal dialogue the "add file" section does not get triggered. Nothing happens when clicking on it, neither am I able to drag and drop files.

I saw a similar problem in another thread, but the solutions provided there didn't work for me (here: Using Dropzone.js inside Bootstrap modal). I have been looking for an answer for days with no luck. Any ideas will 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");
            }
        });
    }
[...]

Thanks for your help.

Answer 1

You should subscribe to the shown.bs.modal event this event is fired when the modal has been made visible to the user. Initialize the Dropzone in this event.

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