Geek Answers Handbook

Global jquery file start / end events

I read the jQuery file upload documentation ( API parameters ) and there are no events displayed that mean "I'm starting" and "I'm done." There is a start and a stop, but they are called for every file download that is being executed.

Does anyone know about an event that I just don't see, or how to emulate a global start / stop operation?

+4
source share
3 answers

You can use progressall :

 function (e, data) { var progress = parseInt(data.loaded / data.total, 10); if( progress === 1) { //done :) } }
+1
source

Actually it should be a stop callback function.

 stop Callback for uploads stop, equivalent to the global ajaxStop event (but for file upload requests only). Example: function (e) { console.log('Uploads finished'); }

https://github.com/blueimp/jQuery-File-Upload/issues/990

+1
source

The closest to which I am attached to the global "start" is handling drop / change / paste events:

 $('input[type="file"]').fileupload({ // config here... }).bind('fileuploaddrop fileuploadchange fileuploadpaste', function(e, data) { console.log('Global start'); });

This handler fires only once; immediately after the user initiated the download, before starting to process the file queue (or any remote downloads).

If you are not doing client side validation, the answer from @Kamel works well for the global "end" ( as the documentation suggests ).

If you are doing client-side validation, you may also need to consider cases where the download does not start when ajax loads. I did this by first writing down the files that were uploaded, and then triggering an “end” when all were either rejected by the client or succeeded / failed / interrupted after ajax loading:

 var selectedFiles = []; $('#fileUpload').fileupload({ url: '//jquery-file-upload.appspot.com/', //url: '//does.not.exist/', dataType: 'json', singleFileUploads: true, // validate client-side: only allow '.png' files acceptFileTypes: /(\.|\/)png$/i, done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo('#files'); }); }, processfail: function (e, data) { var currentFile = data.files[0]; console.log(currentFile.name, 'cannot be uploaded'); if (data.files.error && currentFile.error) { setFileDone(currentFile.name); } }, always: function (e, data) { setFileDone(data.files[0].name); } }).bind('fileuploaddrop fileuploadchange fileuploadpaste', function(e, data) { selectedFiles = data.files.map(function(f) { return f.name; }); console.log('Global start'); }); var setFileDone = function(fName) { selectedFiles.pop(fName); if (!selectedFiles.length) { console.log('Global end'); } };

There is a working demonstration of this on jsbin : the beginning and the end are written to the console as described above.

0
source

More articles:


All Articles