I have looked on here and other sites at many examples of plUpload. I have taken code from these examples and have got different forms working but none will do exactly what i'm looking for - fingers crossed you guys will help me find a solution.
I currently have a data entry form made up of table rows with each row allowing uploading of an image. This form is submitted to PHP and the images/data stored.
I'm wanting to move the image upload routines over to plUpload to work better with older/more browsers and allowing client image resize etc.
From what i can see I need a mix of the core plUpload and the jQuery module to allow for instances to be bound via a class rather than an id but I went down that route and hit a brick wall. I've now been looking at another two bits of code found on here (sorry I've forgot the author name) and have come up with the below.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
<form id="form" action="" multipart method="post">
<div id="container1" class="gallery">
<a id="pickfiles1" href="javascript:;">[Select files]</a>
<a id="uploadfiles1" href="javascript:;">[Upload files]</a>
</div>
<div id="container2" class="gallery">
<a id="pickfiles2" href="javascript:;">[Select files]</a>
<a id="uploadfiles2" href="javascript:;">[Upload files]</a>
</div>
<input type="submit" /></input>
</form>
<p><label>Debug data:</label><div id="debug"></div></p>
<div id="uploaded"></div>
<script>
function initUploader(itemIndex) {
var uploader1 = new plupload.Uploader({
runtimes: 'html5,html4,flash,silverlight,browserplus',
browse_button: 'pickfiles'+itemIndex,
container: 'container'+itemIndex,
max_file_size: '10mb',
max_retries: 3,
chunk_size: '1mb',
url: 'upload.php',
unique_names: false,
preserve_headers: false,
flash_swf_url: 'http://www.plupload.com/plupload/js/plupload.flash.swf',
silverlight_xap_url: 'http://www.plupload.com/plupload/js/plupload.silverlight.xap',
filters: [
{
title: "Image files",
extensions: "jpg,gif,png"}
],
resize: {width : 320, height : 240, quality : 90}
});
uploader1.bind('Init', function(up, params) {
$('#filelist'+itemIndex).html("<div>Current runtime: " + params.runtime + "</div>");
});
$('#uploadfiles'+itemIndex).click(function(e) {
uploader1.start();
e.preventDefault();
});
uploader1.init();
uploader1.bind('UploadProgress', function(up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
uploader1.bind('Error', function(up, err) {
$('#filelist'+itemIndex).append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up.refresh(); // Reposition Flash/Silverlight
});
uploader1.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
$('#debug').prepend('Uploading ' + file.name + ' (' + file.size + ' bytes)');
});
// up.refresh();
// up.start();
});
uploader1.bind('FileUploaded', function(up, file) {
// $('#' + file.id + " b").html("100%");
$('#uploaded').prepend('<p><a href="' + public_url + file.name + '" target="_blank"><img src="' + public_url + file.name + '" width="100"/></a></p>');
});
}
$('#form').submit(function(e) {
// Files in queue upload them first
alert("Submit");
var uploader = $('#container2').plupload('getUploader');
// Validate number of uploaded files
if (uploader.total.uploaded == 0)
{
// Files in queue upload them first
if (uploader.files.length > 0)
{
// When all files are uploaded submit form
uploader.bind('UploadProgress', function ()
{
$('#uploader1').on('complete', function() {
alert("Complete - wait for rest");
$('#form').submit();
});
});
$('#uploader1').plupload('start');
} else { $('#form').submit();}
//alert('You must at least upload one file.');
e.preventDefault();
} else { $('#form').submit();}
});
initUploader(1);
initUploader(2);
</script>
The routine will allow me to selet files but I can't submit them on form submit..
Any help to point me in the right direction would be appreciated.