I'm having an issue in firing the uploader.start() in case if start button is not clicked for file upload, I am using latest version Plupload. here is the complete code, and I want to find the temp names given for each file uploaded on submit click, so that I can go to the server and rename the files with the reference ID which makes easy to identify the file that belongs.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Styles/jquery.plupload.queue.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Script/FileUpload/plupload.full.js" type="text/javascript"></script>
<script src="Script/FileUpload/jquery.plupload.queue.js" type="text/javascript"></script>
<title>Test Page</title>
<script type="text/javascript">
$(document).ready(function () {
$("#Testloader").pluploadQueue({
runtimes: 'flash',
url: 'FileUpload.ashx',
max_file_size: '100mb',
urlstream_upload: true,
chunk_size: '5MB',
//unique_names: false,
multiple_queues: true,
filters: [
{ title: "Document files", extensions: "pdf,doc,docx,tiff" },
{ title: "Image files", extensions: "jpg,png" }
],
// Flash settings
flash_swf_url: 'Images/plupload.flash.swf',
// // Silverlight settings
// silverlight_xap_url: 'assets/resources/plupload.silverlight.xap',
init: {
FileUploaded: function (up, file, info) {
},
FilesRemoved: function (up, files) {
plupload.each(files, function (file) {
});
}
}
});
});
$('form').submit(function (e) {
alert("clicked me");
var uploader = $("#Testloader").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();
alert("Form submitted");
}
});
uploader.start();
} else {
alert('You must queue at least one file.');
}
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="Testloader">
</div>
<input type="submit" value="send" />
</form>
</body>
</html>
First, you should move the submit binding inside the $(document).ready to ensure the DOM is ready for submit binding.
I guess you should try relying on a closure to ensure "uploader" is correctly bound during StateChanged (you could also begin your StateChanged Handler with var uploader = $("#Testloader").pluploadQueue();) :
$('form').submit(function (e) {
alert("clicked me");
var uploader = $("#Testloader").pluploadQueue();
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', (function(closedUploader){return function () {
if (closedUploader.files.length === (closedUploader.total.uploaded + closedUploader.total.failed)) {
// $('form')[0].submit();
alert("Form submitted");
}
};})(uploader)
);
uploader.start();
} else {
alert('You must queue at least one file.');
}
return false;
});
Hope this will help
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With