CODEWITHSUNDEEP
javascriptjquerydropzone.js
Martin Dawson
Martin Dawson

Reputation: 7656

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 triedautoProcessQueue = 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" });
                });
            }
    }
});

Upvotes: 0

Views: 2551

Answers (2)

dikkini
dikkini

Reputation: 1182

Here how i implement delayed uploading (initiated by click on any button, for an example):

Dropzone implementation

var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
    paramName: "file", // The name that will be used to transfer the file
    addRemoveLinks: true,
    maxFilesize: 5, // MB
    parallelUploads: 5,
    uploadMultiple: true,
    acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
    maxFiles: 10,
    init: function() {
        this.on("removedfile", function (file) {
            // delete from our dict removed file
            delete addedFilesHash[file];
        });
    },
    accept: function(file, done) {
        var _id = count++;
        file._id = _id;
        addedFilesHash[_id] = done;
    }
});

Somewhere else

    // get all uploaded files in array
    var addedFiles = Object.keys(addedFilesHash);
    // iterate them
    for (var i = 0; i< addedFiles.length; i++) {
        // get file obj
        var addedFile = addedFiles[i];
        // get done function
        var doneFile = addedFilesHash[addedFile];
        // call done function to upload file to server
        doneFile();
    }

We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.

Upvotes: 1

Martin Dawson
Martin Dawson

Reputation: 7656

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.

Upvotes: 0

Related Questions