Dropzone.js-单击dropzone元素时没有任何反应

Question

I'm trying add Dropzone component in a page and I'm having such a big pain with this component: no matter what I do, nothing happens when I click or drop file in the dropzone's element.

<form id="registerUserForm" onsubmit="return submitForm()" class="mt-5">

    <div id="dropzoneDiv" class="dropzone dz-clickable">
        <div class="dz-default dz-message">
            <span>Drop files here to upload</span>
        </div>
     </div>
        .
        .
        .
</form>

As you can see, I'm configuring Dropzone in javascript:

var dropzone=null;

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    dropzone=$("#dropzoneDiv").dropzone({
        url: "/api/works/upload",
        acceptedFiles: 'image/*,video/*',
        autoProcessQueue: false,
        createImageThumbnails: true,
        addRemoveLinks: true
    });
});

function submitForm() {
    dropzone.processQueue();
    return false;
}     

The component is correctly rendered, however simple does not work:

Am I doing something wrong I didn't notice?

Answer 1

I found the solution by chance, the problem is with $(document).ready() sentence. If I remove this listener and use the dropzone configuration call directly, the component works correctly:

var dropzone = null;

Dropzone.autoDiscover = false;
dropzone = $("#dropzoneDiv").dropzone({
    url: "/api/works/upload",
    acceptedFiles: 'image/*,video/*',
    autoProcessQueue: false,
    createImageThumbnails: true,
    addRemoveLinks: true
});

function submitForm() {
    dropzone.processQueue();
    return false;
}

Answer 2

Try using JQuery 2.*, If you are using JQuery > 3

 var dropzone=null; $(document).ready(function () { Dropzone.autoDiscover = false; dropzone=$("#dropzoneDiv").dropzone({ url: "/api/works/upload", acceptedFiles: 'image/*,video/*', autoProcessQueue: false, createImageThumbnails: true, addRemoveLinks: true }); }); function submitForm() { dropzone.processQueue(); return false; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.1.1/min/dropzone.min.js"></script> <form id="registerUserForm" onsubmit="return submitForm()" class="mt-5"> <div id="dropzoneDiv" class="dropzone dz-clickable"> <div class="dz-default dz-message"> <span>Drop files here to upload</span> </div> </div> </form>