Why do dropzone options fail to load?

Question

I have a dropzone on my view and would like to set some options to force the files to be .zip. I also need to allow for these files to be bigger and get some information when it returns. The options don't seem to be loading for me and quecomplete never gets hit.

Edit.cshtml:

<div class="row">
  <div class="col-8">
    <form asp-action="UploadFiles" class="dropzone" id="versionFiles"> 
    </form>
  </div>
</div>


@section Scripts {
<script>
    $(document).ready(function () {
        Dropzone.options.versionFiles = {
            acceptedFiles: ".zip",
            maxFileSize: 2048,
            timeout: 600000,
            init: function () {
                this.on("queuecomplete", function (file, response) {
                    console.log(file);
                })
            }
        };

    })
</script>
}

Edit: Fixed timeout

Answer 1

Avoid configuring options for Dropzone inside document.ready(function(){ /* ... */ }).

To fix the issue, change your code as below :

$(document).ready(function () { 
    Dropzone.options.versionFiles = {
        acceptedFiles: ".zip",
        maxFileSize: 2048,
        timeout: 600000,
        init: function () {
            this.on("queuecomplete", function (file, response) {
                console.log("ssssssssssssss",file);
            })
        }
    };
}); 

[Edit] :

The reason is the Dropzone.js will automatically discover all form elements with the class dropzone and automatically attach itself to it. If you configure the options by document.ready(function(){/.../}), you cannot guarantee the options is set before dropzone takes effects.

If you do need to trigger after document is ready, you could use a programmatical way to assure the sequence:

Dropzone.autoDiscover = false;           // disable auto discover

$(document).ready(function () { 
    Dropzone.options.versionFiles = {
        acceptedFiles: ".zip",
        maxFileSize: 2048,
        timeout: 600000,
        init: function () {
            this.on("queuecomplete", function (file, response) {
                console.log("xyz...",file);
            })
        }
    };
    $("#versionFiles").dropzone({ });   // trigger it
});