Martin Mazza Dawson Martin Mazza Dawson - 11 days ago 6
Javascript Question

Dropzone.js delay posting to the server but allow uploading to begin

Is it possible to process files with Dropzone, but wait until a button is clicked to post them to server code?

I have tried

autoProcessQueue = false
, however this doesn't start the uploading, I would like to start the process (so my users don't have to wait), but not have dropzone.js call the url straight away.

$(".dropzone.song-image").each(function (i) {
$(this).dropzone({
url: $(this).data().url,
addRemoveLinks: true,
maxFilesize: 20,
maxFiles: 1,
acceptedFiles: "image/*",
dictDefaultMessage: "Add cover image",
dictInvalidFileType: "Only images are accepted",
thumbnailWidth: 330,
thumbnailHeight: 330,
init: function (file) {
this.on("thumbnail", function (file, dataUrl) {
$(".dropzone.song-image .dz-image").last().find("img").attr({ width: "100%", height: "100%" });
});
this.on("success", function (file, response) {
$(this.element).siblings("input[type=hidden]").val(response.imageBytes);
file.previewElement.classList.add("dz-success");
$(".dropzone.song-image .dz-image").css({ "width": "100%", "height": "auto" });
});
}
}
});

Answer

I had a look at the source code, and xhr.Send(form); (posting to the server of your url) is sent immediately after the files have been processed and then the upload begins.

So, unless someone knows any better than me, I don't think it's possible without changing Dropzone.js source code (or even at all?) which I obviously don't want to do.