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?