I am incorporating Dropzone in my form, which contains other data. For the create process, it works well. Images can be dragged and dropped into the Dropzone box, and when the "Save_button" is clicked, the images will be submitted together with the rest of the form data.
I also used this same page, for the edit process, to allow users to edit the submitted images and other relevant data. Uploaded images are pulled and displayed in Dropzone through the code block "Block with uploaded images" below.
The problem arise here. If the user doesn't add any new image in Dropzone, then clicking on "Save_button" doesn't get the form to upload! I think processQueue doesn't do anything because the image queue is empty and thus not submitting the form.
Question: Is there a way, to force the form to be submitted? For example, trigger a "sendingmultiple" event so that the other form data can be submitted?
Dropzone.options.myDropzone = {
url: '/addpage',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: '.png,.jpg,.jpeg,.gif',
addRemoveLinks: true,
error: function (file, errorMessage, xhr) {
this.onSubmitComplete({
file: file,
xhr: xhr
});
file.status = Dropzone.QUEUED;
},
init: function () {
dzClosure = this;
myDropzone1 = this;
//Block with uploaded images, start
var imagesList = ["http://www/path/to//image1.jpg"]
for (var i = 0; i < imagesList.length; i++) {
var mockFile = { name: "Image " + i, size: 1, type: "image/jpg", status: Dropzone.ADDED, accepted: true };
myDropzone1.emit("addedfile", mockFile);
myDropzone1.emit("thumbnail", mockFile, imagesList[i]);
myDropzone1.createThumbnailFromUrl(mockFile,
myDropzone1.options.thumbnailWidth,
myDropzone1.options.thumbnailHeight,
myDropzone1.options.thumbnailMethod, true, function (thumbnail) {
myDropzone1.emit('thumbnail', mockFile, thumbnail);
});
myDropzone1.files.push(mockFile);
myDropzone1.emit("complete", mockFile);
}
myDropzone1.options.maxFiles = 5 - imagesList.length;
//Block with uploaded images, end
document.getElementById("Save_button").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
var success = true;
if (!someFormValuesValidation())
success = false;
if (!success) {
alert("Form validation failed, please check values.");
return false;
}
else {
dzClosure.processQueue();
}
});
this.on("sendingmultiple", function (data, xhr, formData) {
$('#loading').show();
formData.append("Title", jQuery("#Title").val());
formData.append("Price", jQuery("#Price").val());
formData.append("Quantity", jQuery("#Quantity").val());
});
this.on("successmultiple", function (file, result) {
if (result.Response == "0") {
alert("Success!");
} else {
alert("There is a problem: " + result.Error);
}
file.status = Dropzone.QUEUED;
myDropzone1.status = Dropzone.QUEUED;
});
}
}
<div class="dropzone" id="my-dropzone">
<div class="fallback">
<input name="Images" type="file" multiple />
</div>
</div>
from processQueue not working when there is no new image added to Dropzone
No comments:
Post a Comment