CODEWITHSUNDEEP
javascriptjqueryhtmlfile-uploaddropzone.js
Drogan41
Drogan41

Reputation: 61

Dropzone ProcessQueue event does not hit server after first upload

I have a dropzone upload on my website which handles file uploads. It works perfectly on the first upload. However, when attempting to upload a file (or the same file) a second time by clicking the 'btn_Upload' button again, nothing happens. I believe the issue lies with the 'processQueue()' function as the code reaches this point but the breakpoint serverside is never hit a second time.

The success, error and complete events are also never reached again after the initial upload.

If anyone more knowledgeable with Dropzone could give me a hint as to where I can find a solution to this issue or if someone has encountered a similar problem before, I would appreciate some guidance.

$(document).ready(function () {
    $("#ContentPlaceHolder1_dZUpload").dropzone({
        url: "handlers/Upload.ashx",
        dictDefaultMessage: "Click or Drag and Drop to Upload a File",
        previewTemplate: document.getElementById("dropzoneTemplate").innerHTML,
        timeout: 10000,
        autoProcessQueue: false,
        init: function () {
            let upload = this;

            // Restrict to 1 file uploaded
            upload.on("addedfile", function () {
                if (upload.files[1] != null) {
                    upload.removeFile(upload.files[0]);
                }
            });
            // If validation passes, process queue and add insurance
            $("#btn_Upload").on("click", function (e) {
                e.preventDefault();
                upload.processQueue();
            });
        },
        success: function (file, response) {
            console.log("Upload Attempt Success - Insurance added");
        },
        error: function (file, xhr, formData) {
            console.log("Upload Attempt Error - " + formData.status + " " + formData.statusText);
        },
        complete: function (file, response) {
            console.log("Upload Attempt Finished");
        }
    });
});

Upvotes: 1

Views: 2180

Answers (1)

Drogan41
Drogan41

Reputation: 61

I feel like an idiot now. I literally found the solution a few minutes later.

complete: function (file, response) {
   file.status = "queued";
   console.log("Insurance Upload Attempt Finished");
}

It turns out that dropzone marks files when they have been handled to avoid handling them twice. Therefore, I simply changes the status back to 'queued' and this ensured dropzone would upload them when the button was pushed again.

Solution found here: Using Dropzone to upload twice with asp.net

Upvotes: 2

Related Questions