I recently opened an issue on the Dropzone repo, but here is a summary of what happens.
If I go on the app on mobile to upload images and select Take a Photo or Video, only the last photo captured will be submitted to the server. If I take 3 photos, only the array submitted will only contain the LAST photo. The weird thing is, if I upload 3 photos from the library, it works perfectly.
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#mydropzone",{
url: "<%= request.base_url %>/uploadfiles",
autoProcessQueue: false,
uploadMultiple: true,
addRemoveLinks:true,
parallelUploads:10,
init: function () {
$('#myForm').submit(function(e){
if (isFormValid()){
if(myDropzone.getQueuedFiles().length > 0){
e.preventDefault();
console.log(myDropzone.files)
document.getElementById('modal-main-text').innerText = myDropzone.files.length
myDropzone.processQueue();
}
}
else {
return false;
}
});
},
....other code...
One thing I know, is that before it hits the server... the console.log(myDropzone.files) dropzone does have the correct number of files.
Related
Notes : i tired all questions & answer related this topic.
I use Dropzone js in my application. i want to restrict only 3 file Upload in my dropzone then work fine.
issue is i upload four Number file then my all previous three file remove. that is not correctly .
i want to only alert in upload (four number file). but previous first three File not remove .
Steps:
1. First three file Upload in dropzon.
2. Add one more File in Dropzone. Then alert mess. only and not Previous File Remove
My Code Here
https://jsfiddle.net/mxxa0bk8/16/
var accept = ".png";
Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("#mydropzone", {
url: "/file/post",
acceptedFiles: accept,
uploadMultiple: false,
createImageThumbnails: false,
addRemoveLinks: true,
maxFiles: 3,
maxfilesexceeded: function(file) {
alert("No moar files please!");
},init: function() {
this.on("maxfilesexceeded", function(file) {
this.removeFile(file);
});
this.on('error', function(file, errorMessage) {
var mypreview = document.getElementsByClassName('dz-error');
mypreview = mypreview[mypreview.length - 1];
mypreview.classList.toggle('dz-error');
mypreview.classList.toggle('dz-success');
});
}
});
The following code snippet will make your dropzone remove files when they are completed:
this.on("complete", function(file) {
this.removeFile(file);
});
Add this right under:
this.on('error', function(file, errorMessage) {
var mypreview = document.getElementsByClassName('dz-error');
mypreview = mypreview[mypreview.length - 1];
mypreview.classList.toggle('dz-error');
mypreview.classList.toggle('dz-success');
});
I am using Jquery Form Plugin to upload files using onchange event listener on the file upload input element to upload the file as soon as it is selected.
I want to allow only one file at a time to be uploaded and adding the rest in a queue to be uploaded once the existing upload is complete.
I tried making this happen by using a variable and setting it false in beforeSubmit and then switching it back to true once the upload is complete. However, it keeps turning true automatically.
Here is my Javascript code:
var allowUpload = true;
console.log('initial');
var options = {
beforeSubmit: beforeSubmit,
uploadProgress: OnProgress,
success: afterSuccess,
resetForm: true
};
$('#upload').change(function() {
console.log(allowUpload);
if(allowUpload)
{
console.log('onchange:' + allowUpload);
$('#uploadForm').ajaxSubmit(options);
}
return false;
});
function afterSuccess(data)
{
allowUpload = true;
console.log('aftersuccess' + allowUpload);
}
function beforeSubmit(data)
{
allowUpload = false;
console.log(allowUpload);
}
I have decided to update this question as I still can't change the imageId
This is my current dropzone implementation
$("div#UploadImage").dropzone({
url: '#Url.Action("SaveUploadedPhoto", "Listing", new { advertId = #Model.AdvertId })',
addRemoveLinks: true,
init: function () {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
$("input[type=submit]").on("click", function (e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
myDropzone.on("success", function (file, rep) {
console.log(rep.UniqueId);
fileList[i] = { "serverFileName": rep.UniqueId, "fileName": rep.UniqueId, "fileId": rep.UniqueId, "name": rep.UniqueId };
i++;
console.log(fileList);
});
myDropzone.on("removedfile", function (file) {
var rmvFile = "";
for (f = 0; f < fileList.length; f++) {
if (fileList[f].fileName == file.name) {
rmvFile = fileList[f].serverFileName;
}
}
if (rmvFile) {
$.ajax({
url: '#Url.Action("DeleteUploadedFile", "Listing")',
type: "POST",
data: { "id": rmvFile }
});
}
});
},
maxFilesize: 2,
maxFiles: 12
});
When I upload an image, we pass the image to a third party company which returns a uniqueId for that image, this uniqueId then gets saved in my database, I then pass this uniqueId back to the view which will become the uploaded image name, I'm trying to do this in the "success" function in the above implementation of dropzone, when I do
console.log(rep.UniqueId);
I can see the value and its correct.
When I press "Remove image" on dropzone the "removedFile" function is called, this doesn't fire to the controller because rmvFile is the old image name and it doesn't find a match within the for loop, I know this because when I do
console.log(rmvFile);
It shows the old name, now my question is what am I doing wrong here? how can I change the uploaded image name or id to the uniqueId which is returned after the uploaded has been completed? so I can successfully delete it as and when it required.
I have browsed the web, tried situation's which has resulted in how my success method currently looks.
I've managed to get this working now, after trying many different solutions.
I have found doing the following passes in the uniqueId for the image
file.serverId['UniqueId'],
I am using the Latest version of Plupload (2.1) - UI widget
when i click upload files, it uploads all files correctly.
but when i try to upload files with my Form submit button. it doesn't work. it just showing a little bit uploading of files and then eventually submit the forms without completing the file upload.
here is my code :
jj = jQuery.noConflict();
jj(function() {
jj("#flash_uploader_other").plupload({
runtimes: "html5,flash,silverlight,html4",
url: "/external/uploader-new/upload.php",
max_file_size: "10mb",
chunk_size: "1mb",
unique_names: true,
filters: [
{
title: "jpg,xls,csv,doc,pdf,docx,xlsx",
extensions: "jpg,xls,csv,doc,pdf,docx,xlsx"
}
],
flash_swf_url: "/external/uploader-new/js/Moxie.swf",
silverlight_xap_url: "/external/uploader-new/js/Moxie.xap"
});
// Handle the case when form was submitted before uploading has finished
jj("form").submit(function(e) {
// Files in queue upload them first
if (jj("#flash_uploader_other").plupload("getFiles").length > 0) {
// When all files are uploaded submit form
jj("#flash_uploader_other").on("complete", function() {
jj("form").submit();
});
jj("#flash_uploader_other").plupload("start");
}
});
});
Please help!!
Thanks
its working now
I replaced the following code
jj("form").submit(function(e) {
// Files in queue upload them first
if (jj("#flash_uploader_other").plupload("getFiles").length > 0) {
// When all files are uploaded submit form
jj("#flash_uploader_other").on("complete", function() {
jj("form").submit();
});
jj("#flash_uploader_other").plupload("start");
}
});
With this code :
jj("form").submit(function(e) {
var uploader = jj("#flash_uploader_other").plupload("getUploader");
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind("UploadProgress", function() {
jj("#flash_uploader_other").on("complete", function() {
jj("form").submit();
});
});
jj("#flash_uploader_other").plupload("start");
} else {
jj("form").submit();
}
//alert('You must at least upload one file.');
e.preventDefault();
}
});
I'm working on a file uploader, where about 10 files upload at the same time via a for loop.
Now I am trying to create a cancel button to cancel ALL the uploads, however with my current code, only the very last upload will cancel.
I've included my boiled down code, but basically its a loop which goes through an array of images (theAttach) and for each image it sets up an xhrAttach to send the images. So about say 10 images start uploading at the same time.
If a cancel button is pressed, I run the command xhrAttach.abort(); but only the very last image aborts.
Any ideas?
for (var i=0;i<theAttach.length;i++)
{
var xhrAttach = Ti.Network.createHTTPClient();
xhrAttach.timeout = 15000;
xhrAttach.onsendstream = function(e){
};
xhrAttach.onreadystatechange = function() {
if (xhrAttach.readyState != 4) return;
if ((i == theAttach.length) && (xhrAttach.readyState == 4))
{
}
};
xhrAttach.onerror = function() {
};
xhrAttach.open('POST', url, true);
xhrAttach.setRequestHeader('User-Agent', theuseragent());
xhrAttach.send(AttachmentTransmitArray);
}
Cocco nailed it! He suggested I cache each xhr into a container array, therefore I could access the individual xhr and abort it that way ie xhrAttach[i].abort()
I did this and it works perfectly! Thanks cocco!