Dropzone - Timings to upload Images

Viewed 46

I am using Dropzone to upload images on a form. I am overriding the 'addedFile' function to do some custom functionality to store the uploaded image locally. So, I can get these images on form submit. I am using the following code:

$dropzone.dropzone({
            url: "/file-upload",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 6,
            maxFiles: 6,
            maxFilesize: 2.5,
            addRemoveLinks: true,

            init: function () {
                this.on("addedfile", function (file) {
                    $("#FileUploadErrorMessage").val("");
                    var uniqueId = document.getElementById("UniqueId").value;

                    setTimeout(function () { 
                        var model = {
                            FileName: uniqueId + "-" + file.name,
                            Base64Url: file.dataURL
                        };

                        var defaults = {};
                        var extendedModel = $.extend(defaults, model);

                        $.ajax({
                           // Send '**model**' variable to controller action to store file in 
                           // local directory
                        });
                    }, 3000);
                });
...

I have had to add in the 3 second timeout, around my AJAX function, as the 'file' variable (sent to the function) is undefined till dropzone have finished adding the file to the plugin. But, I need to find a better way of doing this so I don't have to set a 3 second timeout to wait for the 'file' variable because, in some case, the timescale between uploading the image to the plugin and hitting this function is more than the 3 seconds and causing the 'file' variable to be undefined when hitting the AJAX function.

Can anyone help?

1 Answers

This is because the file.dataURL property has not been set when the addedFile event is fired. See this post - DropzoneJS dataURL is undefined.

You're setting the timeout to give DropZone enough time to populate the value. But the disadvantage is that things could take longer than the time you've set.

Related