I'm trying to set up Dropzone.js to handle multiple files at the same time, but also upload each one in 1mb chunks. I can't seem to find the right DZ configuration for this.
When I add "uploadMultiple: true" to my working chunking implementation of DZ, Chrome throws this error: "Uncaught Error: You cannot set both: uploadMultiple and chunking."
The Problem: "autoProcessQueue" was set to "false" because I only wanted to process when the user hits a "submit" button. Even with "uploadMultiple" not set to true, Dropzone will upload more than one file (presumably consecutively rather than simultaneously) as long as the queue is auto-processed.
The Solution:
Dropzone.js calls "chunksUploaded" once all the chunks for a file are uploaded. After the first file successfully uploads all of its chunks, reset the "autoProcessQueue" option to "true." After "queueComplete," set it back to "false" in preparation for the next upload.
See the answer here to understand the chunksUploaded callback, in the context of using it to concatenate chunks following upload: How to concatenate chunked file uploads from Dropzone.js with PHP?
See the end of this thread for turning on/off autoProcessQueue: https://github.com/enyo/dropzone/issues/462
Javascript sample snippet:
( I stripped out all Dropzone and Ajax options to highlight the relevant parts )
var myDropzone = new Dropzone(target, {
chunksUploaded: function(file, done) {
// ajax below posts to a script that merges the uploaded chunks of the current file
$.ajax({
success: function (data) {
myDropzone.options.autoProcessQueue = true;
done();
}
});
}
});
myDropzone.on("queuecomplete", function() {
myDropzone.options.autoProcessQueue = false;
});
Related
I´m trying to do this:
var http = new XMLHttpRequest();
var url = "guardarImg.php";
var params = $('#form').serialize();
http.open("POST", url, true);
http.setRequestHeader("Content-type", "multipart/form-data");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
But is not working, it shows me in my php that 'Image' is not defined, but when I do it through a average Submit it works fine.
All the similar samples I saw work with string data but I need to achieve it with images to make it work later in Intel XDK
What I´m doing wrong?
Can you show me a sample?
Sorry if my question is too basic, I´m a noob with xmlhttp and ajax stuff.
You have the right idea with regard to $("#form").serialize() but for the mess that is (still) AJAX uploads. Yuck (and shame on me for not noting that detail the first time :-( ).
The problem with file uploads via AJAX is (as is often the case), Internet Explorer. Basically, it didn't support the FormData object until IE10 (which means that, if you care about supporting XP users, they'd better be running not-IE). FormData greatly simplifies the process of uploading stuff via AJAX; if you don't have that, here are your options:
Put a little tiny IFRAME on the page and manage that for the actual file upload.
Encode the form data programmatically using something like JSON and send that via jQuery.
Use a nice plugin that wraps this all for you (and uses one or more of these techniques under the covers).
I'm going to assume you don't care about IE8/9 (pretty much everyone else isn't a problem) and give you a FormData solution. Unlike the previous edit, I'm popping in the whole function in here since it's decently informative. This particular solution uploads an entire form, pulling in the existing fields into the FormData object and treating the files specially.
<!-- Many ways to skin this particular feline; I like this one :-) -->
<form onsubmit="return uploadFiles(this)">
<!-- Access from PHP using $_FILES["somefile"]["name"][$idx]... -->
<input type="file" name="somefiles" multiple="1" />
</form>
<script>
// Function to upload a form via FormData, breaking out files and cutting
// any non-named elements. Assumes that there's a #status DIV and the
// URL is hardcoded.
function uploadFiles(frm) {
var formdata = new FormData();
// I'm doing this to separate out the upload content. Note that multiple
// files can be uploaded and will appear as a decently-friendly PHP array
// in $_FILES. Note also that this does handle multiple files properly
// (a default FormData(frm) wouldn't exactly :-( ).
$(frm).find(":input").each(function(idx, ele) {
// This is a file field. Break it out.
if(ele.files) {
for(i=0; i<ele.files.length; i++) {
formdata.append(ele.name + "[" + i + "]", ele.files[i]);
}
// Not a file element, so put in the upload iff there's a name.
} else if(ele.name) {
formdata.append(ele.name, ele.value);
}
});
// Run the AJAX.
$.ajax({
url: "test.php", // Change Me :-)
type: "POST",
data: formdata,
processData: false, // Need these to keep jQuery from messing up your form
contentType: false,
success: function(data) {
$("#status").html(data);
},
error: function(xhr, status, error) {
$("#status").html("Error uploading file(s): " + error);
},
});
return false; // Keep the form from submitting
}
</script>
I have a complete HTML file and corresponding PHP that work at pastebin.
If I were you, I'd actually just use Sebastian's jQuery File Upload if you can. It's got all that modern UI goodness (include progress metering), browser abstraction, and it's MIT licensed to boot. That said, this answer will get you on your way if you just need something to copypasta. Good luck!
I am using FineUploader in my form using this : http://docs.fineuploader.com/branch/master/features/forms.html.
The problem is that, in my form file field is optional.
If I send the form I have this and the form doesn't proceed:
Error On submit
And my js code :
var uploader = new qq.FineUploader({
element: document.getElementById('my-uploader'),
maxConnections:1,
callbacks: {
onAllComplete: function(id, fileName, responseJSON) {
location.reload();
}
}
});
Fine Uploader is a file upload library. As such, you must provide it with files to upload. It is not a form submission library, and will not submit a form unless a file is involved. If you would like to submit a form without a file, you will need to omit attaching Fine Uploader to the form. Your best bet in this case is to allow the file to be sent independent of the form submit.
You can check if there are 0 files: in that case, don't trigger fineUploader "uploadStoredFiles" method. E.g.
var fineUploaderTrigger = jQuery('<div id="fine-uploader"></div>');
fineUploaderTrigger.fineUploader({
template: 'qq-template-manual-trigger',
autoUpload: false, /* important */
[...]
});
var submitButton = $('#submit');
// Trigger upload
submitButton.on('click', function (e) {
e.preventDefault();
// go on also if there are no files to upload
if ($('.qq-upload-list li').length > 0) {
$('#fine-uploader-manual-trigger').fineUploader('uploadStoredFiles');
} else {
submitButton.off('click');
submitButton.click();
}
});
I want to rollback the original dropzone with its message "drop files here" after the success event of dropzone or after the complete event of dropzone.
I don't want to see the preview after success or complete.
This is my dropzone script:
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
parallelUploads: 1,
success: function(file, response) {
var imageSrc = response;
$(".img-responsive").attr('src', imageSrc);
if (imageSrc == '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
} else {
$(".removebutton").show();
}
}
};
Leveraging #kkthxby3 's idea, the innerHTML for the thumbnail can be cleared in the success method using the following code:
success: function (file, response) {
file.previewElement.innerHTML = "";
}
The beauty of this approach is that it clears the thumbnail without firing the removedFile event.
This leaves the following html in the dom where the thumbnail was:
<div class="dz-preview dz-processing dz-image-preview dz-complete"></div>
but as you can see, the div above which is responsible for displaying the thumbnail is now empty.
Another approach is to remove even the enclosing div that wraps the thumbnail along with it's contents. This approach can be accomplished with the following code in the success method and leaves no trace of the thumbnail in the dom:
success: function (file, response) {
file.previewElement.parentNode.removeChild(file.previewElement);
}
Enjoy.
only need call method removeFile in success function
success: function (file, response) {
this.removeFile(file);
}
check doc dropzone
For me the easiest way to make the file preview not appear is with css.
dz-preview and dz-file-preview are a couple classes in the outer div of the preview html generated by the default template.
.dz-preview, .dz-file-preview {
display: none;
}
I also told it to not create thumbnails in the Dropzone.options.
Dropzone.options.myDropzone = {
paramName: "file",
maxFilesize: 2, // MB
url: 'post_image',
createImageThumbnails: false, // NO THUMBS!
init: function () {
this.on('sending', dz_sending),
this.on('success', dz_success),
this.on('error', dz_error),
this.on('complete', dz_complete) // Once it's done...
}
The template still generates all the preview html though. So in my 'complete' function dz_complete I delete it all.
function dz_complete(file) {
$('.dz-preview').remove(); // ...delete the template gen'd html.
}
Just an fyi...
The method 'removeAllFiles' is not necessarily the prime choice. Which is the same as 'removeFile(file)'.
I have an event handler for dropZone's 'removedfile' event... I'm using it to send a server message to delete the respective file from the server (should a user delete the thumbnail after it's been uploaded). Using the method 'removeAllFiles' (as well as the individualized 'removeFile(file)') fires the event 'removedfile' which deletes the uploaded images in addition to clearing the thumbnails.
So one could add some finessing around this but in the reality of it the method is not correct.
Looking through the api for Dropzone I am not seeing an API call to simply reset or clear the thumbnails... The method 'disable()' will clear the stored file names and what not but does not clear the thumbnails... Seems dropzoneJS is actually missing a critical API call to be honest.
My work around is to manually reset the containing div for dropzone:
document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""
This clears the thumbnails without firing off the event 'removedfile' which is supposed to be used for deleting an image from the server...
The easiest thing is to call the dropzone removeFile() method, using an event listener for the success event.
Dropzone.options.myAwesomeDropzone = {
paramName: "file",
maxFilesize: 2,
parallelUploads: 1,
init: function() {
this.on("success", function(file, response) {
var imageSrc = response;
$(".img-responsive").attr('src', imageSrc);
if(imageSrc == '/assets/images/offerfeatimg.jpg') {
$(".removebutton").hide();
} else {
$(".removebutton").show();
}
this.removeFile(file); // This line removes the preview
})
}
};
I was using file.previewElement.remove(), works fine in Chrome but does not work in IE.
Then I tried this.removeFile(file), but it didn't work for me.
After that i tried file.previewElement.innerHTML = "" which works in both Chrome and IE but it leaves an extra div where the preview elements were.
So this one works better for me...
success: function (file, response) {
file.previewElement.outerHTML = "";
}
If you want to remove an added file from the dropzone, you can call .removeFile(file). This method also triggers the removedfile event.
Here’s an example that would automatically remove a file when it’s finished uploading:
myDropzone.on("complete", function(file) {
myDropzone.removeFile(file);
});
If you want to remove all files, simply use .removeAllFiles(). Files that are in the process of being uploaded won’t be removed. If you want files that are currently uploading to be canceled, call .removeAllFiles(true) which will cancel the uploads.
100% Tested and Working:
$('#preview_image_container .dz-preview .dz-remove').attr('id','removeFile');
document.getElementById("removeFile").click();
I have simple problem with Uploadify. Before upload starts, I want to check some criteria, it true - I want to abort uploading. The code below doesn't works properly, it uploads file even if I call the uploadifyCancel. How to fix it ?
$("#fileuploader").uploadify({
uploader: '/Scripts/uploadify.swf',
script: '/Upload/'
fileDataName: 'file',
buttonText:'upload',
multi: false,
sizeLimit: 369878,
simUploadLimit: 1,
cancelImg: '/Images/uploadify-cancel.png',
auto: true,
onOpen:function(event,ID,fileObj) {
var found = $('#uploaded-files-table tr[some-attr="1"]');
if($(found).length == 0){
$('#list').attr('disabled','disabled');
} else {
$("#fileuploader").uploadifyClearQueue();
$("#fileuploader").uploadifyCancel(ID);
}
}
});
I am not sure which version your using But I could do it below way.
I need stop file upload based on file extension
'onAddQueueItem':function(file, e) {
if (!(/\.(gif|jpeg|png|pdf)$/i).test(file.name)) {
$($this).data("uploadifive").removeQueueItem(file, 0, 10);
file.skip = true; //This skip property stop uploading file
}
}
The $("#fileuploader").uploadifyCancel(ID); code is working properly. If you add in an onComplete and an onAllComplete, neither one of these events gets hit signifying that cancel event worked.
The problem is that uploadify inherently starts uploading the file BEFORE the onOpen event occurs. Check here, it looks like they were having the same issues with modifying script data on onOpen http://www.uploadify.com/forums/discussion/5611/uploadifysettings-not-posting-new-script-data/p1
I did have some success canceling files if they were over 600-700KB in size with both $("#fileuploader").uploadifyCancel(ID); and $("#fileuploader").uploadifyClearQueue();. I think this has to deal with the speed of the upload. Because these were larger files, the cancel event had time to fire before the upload finished. On a live server, not on your local host, the upload times would be slower so MAYBE there wouldn't be a problem with the events canceling in time. I wouldn't risk it though.
A possible workaround is to include a secondary button on the page that starts the upload and remove the auto: 'true' from your uploadify init. This way, you could check whatever values you need to before the upload begins.
use onSelect of uploadify to check.
You can do like this:
$("#fileuploader").uploadify({
uploader: '/Scripts/uploadify.swf',
script: '/Upload/'
fileDataName: 'file',
buttonText:'upload',
multi: false,
sizeLimit: 369878,
simUploadLimit: 1,
cancelImg: '/Images/uploadify-cancel.png',
auto: true,
'onSelect': function (file) {
if(file.type==".zip")
{//do something
}
else
{
//cancel upload
}
It seems like I have not clearly communicated my problem. I need to send a file (using AJAX) and I need to get the upload progress of the file using the Nginx HttpUploadProgressModule. I need a good solution to this problem. I have tried with the jquery.uploadprogress plugin, but I am finding myself having to rewrite much of it to get it to work in all browsers and to send the file using AJAX.
All I need is the code to do this and it needs to work in all major browsers (Chrome, Safari, FireFox, and IE). It would be even better If I could get a solution that will handle multiple file uploads.
I am using the jquery.uploadprogress plugin to get the upload progress of a file from the NginxHttpUploadProgressModule. This is inside an iframe for a facebook application. It works in firefox, but it fails in chrome/safari.
When I open the console I get this.
Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80
Any idea how I would fix that?
I would like to also send the file using AJAX when it is completed. How would I implement that?
EDIT:
I need this soon and it is important so I am going to put a 100 point bounty on this question. The first person to answer it will receive the 100 points.
EDIT 2:
Jake33 helped me solve the first problem. First person to leave a response with how to send the file with ajax too will receive the 100 points.
Uploading files is actually possible with AJAX these days. Yes, AJAX, not some crappy AJAX wannabes like swf or java.
This example might help you out: https://webblocks.nl/tests/ajax/file-drag-drop.html
(It also includes the drag/drop interface but that's easily ignored.)
Basically what it comes down to is this:
<input id="files" type="file" />
<script>
document.getElementById('files').addEventListener('change', function(e) {
var file = this.files[0];
var xhr = new XMLHttpRequest();
(xhr.upload || xhr).addEventListener('progress', function(e) {
var done = e.position || e.loaded
var total = e.totalSize || e.total;
console.log('xhr progress: ' + Math.round(done/total*100) + '%');
});
xhr.addEventListener('load', function(e) {
console.log('xhr upload complete', e, this.responseText);
});
xhr.open('post', '/URL-HERE', true);
xhr.send(file);
});
</script>
(demo: http://jsfiddle.net/rudiedirkx/jzxmro8r/)
So basically what it comes down to is this =)
xhr.send(file);
Where file is typeof Blob: http://www.w3.org/TR/FileAPI/
Another (better IMO) way is to use FormData. This allows you to 1) name a file, like in a form and 2) send other stuff (files too), like in a form.
var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);
FormData makes the server code cleaner and more backward compatible (since the request now has the exact same format as normal forms).
All of it is not experimental, but very modern. Chrome 8+ and Firefox 4+ know what to do, but I don't know about any others.
This is how I handled the request (1 image per request) in PHP:
if ( isset($_FILES['file']) ) {
$filename = basename($_FILES['file']['name']);
$error = true;
// Only upload if on my home win dev machine
if ( isset($_SERVER['WINDIR']) ) {
$path = 'uploads/'.$filename;
$error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
}
$rsp = array(
'error' => $error, // Used in JS
'filename' => $filename,
'filepath' => '/tests/uploads/' . $filename, // Web accessible
);
echo json_encode($rsp);
exit;
}
Here are some options for using AJAX to upload files:
AjaxFileUpload - Requires a form element on the page, but uploads the file without reloading the page. See the Demo.
List of JQuery Plug-ins Tagged With "File"
Uploadify - A Flash-based method of uploading files.
How can I upload files asynchronously?
Ten Examples of AJAX File Upload - This was posted this year.
UPDATE: Here is a JQuery plug-in for Multiple File Uploading.