Right now I have something like this in plupload.js:
$("#uploader").pluploadQueue({
// General settings
runtimes: 'html5,silverlight,flash',
url: baseurl + 'admin/pages_images/uploadtoserver/' + pageID,
browse_button : 'uploadFiles',
max_file_size: '300mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
// resize: {width: 320, height: 240, quality: 100},
// Specify what files to browse for
filters: [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
],
// Flash/Silverlight paths
flash_swf_url: baseurl + 'assets/js/plupload/plupload.flash.swf',
silverlight_xap_url: baseurl + 'assets/js/plupload/plupload.silverlight.xap',
// PreInit events, bound before any internal events
preinit: {
Init: function(up, info) {
log('[Init]', 'Info:', info, 'Features:', up.features);
},
UploadFile: function(up, file) {
log('[UploadFile]', file);
// You can override settings before the file is uploaded
// up.settings.url = 'upload.php?id=' + file.id;
// up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
}
},
// Post init events, bound after the internal events
init: {
Refresh: function(up) {
// Called when upload shim is moved
log('[Refresh]');
},
StateChanged: function(up) {
// Called when the state of the queue is changed
log('[StateChanged]', up.state == plupload.STARTED ? "STARTED": "STOPPED");
},
QueueChanged: function(up) {
// Called when the files in queue are changed by adding/removing files
log('[QueueChanged]');
},
UploadProgress: function(up, file) {
// Called while a file is being uploaded
log('[UploadProgress]', 'File:', file, "Total:", up.total);
},
FilesAdded: function(up, files) {
// Callced when files are added to queue
log('[FilesAdded]');
plupload.each(files, function(file) {
log(' File:', file);
});
},
FilesRemoved: function(up, files) {
// Called when files where removed from queue
log('[FilesRemoved]');
plupload.each(files, function(file) {
log(' File:', file);
});
},
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
log('[FileUploaded] File:', file, "Info:", info);
var myuploader = $("#uploader").pluploadQueue();
myuploader.bind('QueueChanged', function(up, files){
remaining_files = myuploader.files.length;
alert('All Files uploaded!');
});
$.ajax({
type : "POST",
url : baseurl + 'admin/pages/reload/' + pageID,
success: function(data){
if(data) {
alert('File uploaded!');
} else {
alert('ajax error');
}
}
});
},
ChunkUploaded: function(up, file, info) {
// Called when a file chunk has finished uploading
log('[ChunkUploaded] File:', file, "Info:", info);
},
Error: function(up, args) {
// Called when a error has occured
// Handle file specific error and general error
if (args.file) {
log('[error]', args, "File:", args.file);
} else {
log('[error]', args);
}
}
}
});
$('#log').val('');
$('#clear').click(function(e) {
e.preventDefault();
$("#uploader").pluploadQueue().splice();
});
But of course it's not working, because I don't know how to decrement the remaining files. Or to be precise I don't know how to get the number of all files in the queue in the first place, so I can -1 them and compare with the initial value. How do I do that?
You have to bind an event for that and create a counter.
A full answer is here.
var files_remaining = 0;
$("#uploader").pluploadQueue({
// General settings
runtimes: 'html5,silverlight,flash',
url: baseurl + 'admin/pages_images/uploadtoserver/' + pageID,
browse_button : 'uploadFiles',
max_file_size: '300mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
// resize: {width: 320, height: 240, quality: 100},
// Specify what files to browse for
filters: [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
],
// Flash/Silverlight paths
flash_swf_url: baseurl + 'assets/js/plupload/plupload.flash.swf',
silverlight_xap_url: baseurl + 'assets/js/plupload/plupload.silverlight.xap',
// PreInit events, bound before any internal events
preinit: {
Init: function(up, info) {
log('[Init]', 'Info:', info, 'Features:', up.features);
},
UploadFile: function(up, file) {
log('[UploadFile]', file);
// You can override settings before the file is uploaded
// up.settings.url = 'upload.php?id=' + file.id;
// up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
}
},
// Post init events, bound after the internal events
init: {
Refresh: function(up) {
// Called when upload shim is moved
log('[Refresh]');
},
StateChanged: function(up) {
// Called when the state of the queue is changed
log('[StateChanged]', up.state == plupload.STARTED ? "STARTED": "STOPPED");
},
QueueChanged: function(up) {
// Called when the files in queue are changed by adding/removing files
log('[QueueChanged]');
},
UploadProgress: function(up, file) {
// Called while a file is being uploaded
log('[UploadProgress]', 'File:', file, "Total:", up.total);
},
FilesAdded: function(up, files) {
// Callced when files are added to queue
log('[FilesAdded]');
plupload.each(files, function(file) {
log(' File:', file);
});
},
FilesRemoved: function(up, files) {
// Called when files where removed from queue
log('[FilesRemoved]');
plupload.each(files, function(file) {
log(' File:', file);
});
},
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
log('[FileUploaded] File:', file, "Info:", info);
var myuploader = $("#uploader").pluploadQueue();
myuploader.bind('QueueChanged', function(up, files){
remaining_files = myuploader.files.length;
alert('All Files uploaded!');
});
$.ajax({
type : "POST",
url : baseurl + 'admin/pages/reload/' + pageID,
success: function(data){
if(data) {
alert('File uploaded!');
} else {
alert('ajax error');
}
}
});
},
ChunkUploaded: function(up, file, info) {
// Called when a file chunk has finished uploading
log('[ChunkUploaded] File:', file, "Info:", info);
},
Error: function(up, args) {
// Called when a error has occured
// Handle file specific error and general error
if (args.file) {
log('[error]', args, "File:", args.file);
} else {
log('[error]', args);
}
}
}
});
var uploader = $("#uploader").pluploadQueue();
uploader.bind('QueueChanged', function(up, files)
{
files_remaining = uploader.files.length;
});
uploader.bind('FileUploaded', function(up, file, res)
{
files_remaining--;
if (files_remaining == 0)
{
alert('Complete!');
}
});