Pages 1
How do you reset the uploader after the transfer queue completes, so the user can upload more files if they want? As it is, when the transfer is complete it shows the number of files transferred, but I can seem to figure out a way to get the "Add files" and "Start upload" buttons back.
try "refresh" http://www.plupload.com/plupload/docs/a … ml-refresh
Last edited by quasiperfect (2010-07-27 07:53:34)
Doesn't work. Nothing happens.
uploader.bind('FileUploaded', function(up, file, res) {
if(this.total.queued == 0) {
uploader.refresh();
}
});
I am looking for the same thing: Restart jquery widget without reloading the page. But the .refresh() or .init() do not work with the jquery widget - at least for me ... I found a in my eyes not very elegant but working solution: define a function for creating the widget which is called at page loaded AND upload queue done:
$(document).ready(function() {
do_plupload();
});
function do_plupload() {
$('#js-uploader').pluploadQueue({
// your settings here ...
});
var uploader = $('#js-uploader').pluploadQueue();
// autostart
uploader.bind('FilesAdded', function(up, files) {
uploader.start();
});
// new after upload
uploader.bind('FileUploaded', function(up, file, res) {
if(up.total.queued == 0) {
do_plupload();
}
});
}It seems to work but I think this should be done by a plupload callback and not by a user function. If a admininstrator is reading this: can you please add this in the next plupload release or at least give us more examples on your homepage?!?!?
Sure if there is a popular demand for it. We use the product our self but when we upload the automatically close the upload dialog after the queue has been uploaded so there is no need to reset. However some other applications might need to reset it to do more things like using it in some form of wizard.
The problem is that the UI in the queue widget needs to be modified in order to have a reset button. It can't auto reset after it uploaded the queue since there might be errors and statuses the user wants to see. I'm not sure I want to add more buttons making the application more complex that it needs to.
I understand your concerns. The enduser should be able to recognize errors and statuses .. but it is a common request of my endusers to select images from multiple folders on the client to put them together in one folder on the server. Then you need to select multiple times and the enduser does not like to click too often through different forms ... so from API point ov view it would be great if we could do a widget reset again and again. For sure error checking must be done before resetting ... for the status reporting I use a small report div which is filled after each queue upload.
The API and the widget support selecting files multiple times. That's why we have a queue and a separate upload button. The widget has a limit where it locks up the upload button once it's finished. If you have a custom implementation you can clear and reset the queue and upload new files if you want.
You are right. There are multiple ways to do things. I had another workflow in mind: autostart of upload after files had been added to the queue. But then I am stuck after the first selection of files as the upload is already running - it is more meaningful to fill the queue and then finally upload them all.
I am looking for the same thing: Restart jquery widget without reloading the page. But the .refresh() or .init() do not work with the jquery widget - at least for me ... I found a in my eyes not very elegant but working solution: define a function for creating the widget which is called at page loaded AND upload queue done
Hi cyberlussi,
i used the same solution, but somehow, after the first upload, everytime that I add some file, the FilesAdded callback is called 3 times.. did you had the same problem?
After this, i changed the plupload.full.min.js to add file on the list only if it isn't already there (using filename and size). But I don't think this is the best solution, cause if I add 1000 images, I would check all the list for every file.
Sometimes, firebug reports an error after the first upload
file is undefined
if (file.status != plupload.FAILED) { did you have this problem as well?
I would love to have a reset option managed by plupload.
Last edited by liri (2010-08-04 18:08:20)
hm ... I tested it. Uploaded 3 files. I see in firebug 3 POSTs (chunking is disabled). In my called script I see 3 files being uploaded. Then I repeated with other 3 files - the same as before.
To check again I added a alert() in the binding of FilesAdded - it is only called everytime I added files ... so I do not have your problem.
Nevertheless I changed my mind to not using plupload widget this way .. as the POST data of the top level form where the plupload widget is located is likely not set correctly after multiple artificial widget resets (which is only important if you do not manage your backend process in the upload target e.g. upload.php).
It seems to me that it shouldn't be too difficult to just leave the add files button.
After the first pass, you should be able to know exactly which files it has tried. User adds more to the queue, and once they click upload it only does the new ones.
I've posted the same solution on another topic, looking for the same problem.
Instead of resetting the uploader and losing the status of previous files, I just show the buttons to add files and start uploading again. Should work for every runtime, at least I hope.
I'm using jQuery to handle elements.
uploader.bind('UploadProgress', function() {
if (uploader.total.uploaded == uploader.files.length) {
$(".plupload_buttons").css("display", "inline");
$(".plupload_upload_status").css("display", "inline");
$(".plupload_start").addClass("plupload_disabled");
}
});
uploader.bind('QueueChanged', function() {
$(".plupload_start").removeClass("plupload_disabled");
});The reason I disable the Start Upload button is that if you click without adding any file, the buttons will just disappear and the UploadProgress event won't fire, for there is no upload.
Hope it helps 
I've posted the same solution on another topic, looking for the same problem.
Instead of resetting the uploader and losing the status of previous files, I just show the buttons to add files and start uploading again. Should work for every runtime, at least I hope.
I'm using jQuery to handle elements.
uploader.bind('UploadProgress', function() { if (uploader.total.uploaded == uploader.files.length) { $(".plupload_buttons").css("display", "inline"); $(".plupload_upload_status").css("display", "inline"); $(".plupload_start").addClass("plupload_disabled"); } }); uploader.bind('QueueChanged', function() { $(".plupload_start").removeClass("plupload_disabled"); });The reason I disable the Start Upload button is that if you click without adding any file, the buttons will just disappear and the UploadProgress event won't fire, for there is no upload.
Hope it helps
I attempted doing this same thing on one of my projects. I had a huge issue with file names getting messed up if you aren't using unique names. It seems that the upload still contains the old files and tries to upload them again? It did work, but it seems like the originally uploaded things got uploaded twice.
I pushed a change to github that adds a new multiple_queues option that enables you to upload multiple times. And I don't think it will ever re-upload an old file since it's status changes.
Yeah...this is great, I'll take this as my reference for future encounter
i had same problem ...,
after downloaded all the files the user can upload more files if they want !!!
the state is maintained, at least for me ... lol
hope this helps ...
add the following code in UploadComplete event
//plupload_add
$(".plupload_buttons").css("display", "inline");
$(".plupload_upload_status").css("display", "inline");
try this,
$(function () {
$("#uploader").pluploadQueue({
// General settings
runtimes: 'gears,silverlight,flash,browserplus,html5',
url: 'UploadHandler.ashx',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
// Flash settings
flash_swf_url: 'js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'js/plupload.silverlight.xap',
preinit: {
Init: function (up, info) {
//log('[Init]', 'Info:', info, 'Features:', up.features);
},
UploadFile: function (up, file) {
//log('[UploadFile]', file);
},
UploadComplete: function (up, file) {
//plupload_add
$(".plupload_buttons").css("display", "inline");
$(".plupload_upload_status").css("display", "inline");
},
UploadProgress: function (up,file) {
},
PostInit: function (up) {
},
QueueChanged: function (up) {
}
}
});Last edited by cealex (2012-11-16 19:23:13)
the "$("#uploader").pluploadQueue({" doesn't work correctly with flash player, use instead --> $("#uploader").plupload({
see commented code, to change from pl..queue to plupload
<script type="text/javascript">
//$('#Refresh').click(function (event) {});
//todo: ao utilizar o flash, nao faz upload de files grandes, nao percebi porque
//nos exemplos do upload http://www.plupload.com/example_jquery_ui.php
$(function () {
$("#uploader").plupload({
//$("#uploader").pluploadQueue({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'UploadHandler.ashx',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
// Flash settings
flash_swf_url: 'js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'js/plupload.silverlight.xap',
preinit: {
Init: function (up, info) {
//log('[Init]', 'Info:', info, 'Features:', up.features);
},
UploadFile: function (up, file) {
//log('[UploadFile]', file);
},
/*
UploadComplete: function (up, file) {
$(".plupload_buttons").css("display", "inline");
$(".plupload_upload_status").css("display", "inline");
},
*/
//FilesAdded(uploader:Uploader, files:Array)
FilesAdded: function (up, files) {
/*
files.each(function(file, i) {
$('#myfiles').append("<div>i=" + i +"</div>");
});
*/
},
UploadProgress: function (up, file) {
},
PostInit: function (up) {
},
QueueChanged: function (up) {
}
},
init: {
PostInit: function (up) {
//alert();
$('#deleteallfiles').click(function (e) {
//alert();
up.splice();
/*
$.each(uploader.files, function (i, file) {
uploader.removeFile(file);
});
*/
});
}
}
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').plupload('getUploader');
//var uploader = $('#uploader').pluploadQueue();
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
} else {
alert('You must queue at least one file.');
}
return false;
});
});
</script>Pages 1
You are not logged in. Please login or register.