How to use multiple plupload instance in a single form or single page
Today one of my client need a multiple upload options in a single form using a plupload ,
but didnt find best solution about that,
So for other friend who need to same functionality i share my code with you,
Here is a sample code for how to use a plupload multiple instance in single form or single page,
you just need to create a unique container and a unique button for all instance,
<div id="upload-container">
<div id="upload-container-1">
<div id="aaiu-upload-imagelist-1">
<ul id="aaiu-ul-list-1" class="aaiu-upload-list">
</ul>
</div>
<div id="imagelist-1" class="" data-source="<?php echo $edit_id; ?>"> </div>
<a id="upload-button-1" class="aaiu_button" href="#">Click here to add photographs</a>
<input type="hidden" name="uploader1_attachid" id="uplodaer1_attachid" >
<input type="hidden" name="uploader1_attachthumb" id="uploader1_attachthumb" >
</div>
</div>
<div id="upload-container">
<div id="upload-container-2">
<div id="aaiu-upload-imagelist-2">
<ul id="aaiu-ul-list-2" class="aaiu-upload-list">
</ul>
</div>
<div id="imagelist-2" class="" data-source="<?php echo $edit_id; ?>"> </div>
<a id="upload-button-2" class="aaiu_button" href="#">Click here to add photographs</a>
<input type="hidden" name="uploader2_attachid" id="uploader2_attachid" >
<input type="hidden" name="uplaoder2_attachthumb" id="uplaoder2_attachthumb" >
</div>
</div>
</body>
<script>
jQuery(document).ready(function($) {
"use strict";
if (typeof(plupload) !== 'undefined') {
var uploader1 = new plupload.Uploader({
runtimes : 'html5,flash,html4',
browse_button : 'upload-button-1',
container : 'upload-container-1',
file_data_name : 'upload_file',
max_file_size : $max_file_size . 'b', //maximum file size you want set
url : '<?php echo admin_url('admin-ajax.php') . '?action=me_upload1&nonce='. wp_create_nonce('aaiu_allow') ?>' , //here add your ajax request function url or callback method url for example i putted link
flash_swf_url :
'<?php echo includes_url('js/plupload/plupload.flash.swf') ?>', // path for plupload.flash.swf file
filters : array(array('title' => __('Allowed Files','wpestate'), 'extensions' => "jpg,gif,png")), // filters option or validation for extension type
multipart : true,
urlstream_upload : true,
});
uploader1.init();
uploader1.bind('FilesAdded', function (up, files) {
$.each(files, function (i, file) {
// console.log('append'+file.id );
$('#aaiu-upload-imagelist-1').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up.refresh(); // Reposition Flash/Silverlight
uploader1.start();
});
uploader1.bind('UploadProgress', function (up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
// On erro occur
uploader1.bind('Error', function (up, err) {
$('#aaiu-upload-imagelist-1').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up.refresh(); // Reposition Flash/Silverlight
});
uploader1.bind('FileUploaded', function (up, file, response) {
console.log(response.response);
var result = $.parseJSON(response.response);
// console.log(result);
$('#' + file.id).remove();
if (result.success) {
var all_id=$('#uplodaer1_attachid').val();
all_id=all_id+","+result.attach;
$('#uplodaer1_attachid').val(all_id);
$('#imagelist-1').append('<div class="uploaded_images" data-imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa deleter fa-trash-o"></i> </div>');
delete_binder();
thumb_setter();
}
});
}
var uploader2 = new plupload.Uploader({
runtimes : 'html5,flash,html4',
browse_button : 'upload-button-2',
container : 'upload-container-2',
file_data_name : 'upload_file',
max_file_size : $max_file_size . 'b', //maximum file size you want set
url : '<?php echo admin_url('admin-ajax.php') . '?action=me_upload&nonce='. wp_create_nonce('aaiu_allow') ?>' , //here add your ajax request function url or callback method url for example i putted link
flash_swf_url :
'<?php echo includes_url('js/plupload/plupload.flash.swf') ?>', // path for plupload.flash.swf file
filters : array(array('title' => __('Allowed Files','wpestate'), 'extensions' => "jpg,gif,png")), // filters option or validation for extension type
multipart : true,
urlstream_upload : true,
});
uploader2.init();
uploader2.bind('FilesAdded', function (up_2, files) {
$.each(files, function (i, file) {
// console.log('append'+file.id );
$('#aaiu-upload-imagelist-2').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up_2.refresh(); // Reposition Flash/Silverlight
uploader2.start();
});
uploader2.bind('UploadProgress', function (up_2, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
// On erro occur
uploader2.bind('Error', function (up_2, err) {
$('#aaiu-upload-imagelist-2').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up_2.refresh(); // Reposition Flash/Silverlight
});
uploader2.bind('FileUploaded', function (up_2, file, response) {
console.log(response.response);
var result = $.parseJSON(response.response);
// console.log(result);
$('#' + file.id).remove();
if (result.success) {
var all_id=$('#uplodaer2_attachid').val();
all_id=all_id+","+result.attach;
$('#uplodaer2_attachid').val(all_id);
$('#imagelist-2').append('<div class="uploaded_images" data-imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa deleter fa-trash-o"></i> </div>');
delete_binder();
thumb_setter();
}
});
$('#aaiu-uploader-1').click(function (e) {
// uploader2.destroy();
uploader.start();
e.preventDefault();
});
$('#aaiu-uploader-2').click(function (e) {
uploader_upc.start();
e.preventDefault();
});
});
</script>
but didnt find best solution about that,
So for other friend who need to same functionality i share my code with you,
Here is a sample code for how to use a plupload multiple instance in single form or single page,
you just need to create a unique container and a unique button for all instance,
<div id="upload-container">
<div id="upload-container-1">
<div id="aaiu-upload-imagelist-1">
<ul id="aaiu-ul-list-1" class="aaiu-upload-list">
</ul>
</div>
<div id="imagelist-1" class="" data-source="<?php echo $edit_id; ?>"> </div>
<a id="upload-button-1" class="aaiu_button" href="#">Click here to add photographs</a>
<input type="hidden" name="uploader1_attachid" id="uplodaer1_attachid" >
<input type="hidden" name="uploader1_attachthumb" id="uploader1_attachthumb" >
</div>
</div>
<div id="upload-container">
<div id="upload-container-2">
<div id="aaiu-upload-imagelist-2">
<ul id="aaiu-ul-list-2" class="aaiu-upload-list">
</ul>
</div>
<div id="imagelist-2" class="" data-source="<?php echo $edit_id; ?>"> </div>
<a id="upload-button-2" class="aaiu_button" href="#">Click here to add photographs</a>
<input type="hidden" name="uploader2_attachid" id="uploader2_attachid" >
<input type="hidden" name="uplaoder2_attachthumb" id="uplaoder2_attachthumb" >
</div>
</div>
</body>
<script>
jQuery(document).ready(function($) {
"use strict";
if (typeof(plupload) !== 'undefined') {
var uploader1 = new plupload.Uploader({
runtimes : 'html5,flash,html4',
browse_button : 'upload-button-1',
container : 'upload-container-1',
file_data_name : 'upload_file',
max_file_size : $max_file_size . 'b', //maximum file size you want set
url : '<?php echo admin_url('admin-ajax.php') . '?action=me_upload1&nonce='. wp_create_nonce('aaiu_allow') ?>' , //here add your ajax request function url or callback method url for example i putted link
flash_swf_url :
'<?php echo includes_url('js/plupload/plupload.flash.swf') ?>', // path for plupload.flash.swf file
filters : array(array('title' => __('Allowed Files','wpestate'), 'extensions' => "jpg,gif,png")), // filters option or validation for extension type
multipart : true,
urlstream_upload : true,
});
uploader1.init();
uploader1.bind('FilesAdded', function (up, files) {
$.each(files, function (i, file) {
// console.log('append'+file.id );
$('#aaiu-upload-imagelist-1').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up.refresh(); // Reposition Flash/Silverlight
uploader1.start();
});
uploader1.bind('UploadProgress', function (up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
// On erro occur
uploader1.bind('Error', function (up, err) {
$('#aaiu-upload-imagelist-1').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up.refresh(); // Reposition Flash/Silverlight
});
uploader1.bind('FileUploaded', function (up, file, response) {
console.log(response.response);
var result = $.parseJSON(response.response);
// console.log(result);
$('#' + file.id).remove();
if (result.success) {
var all_id=$('#uplodaer1_attachid').val();
all_id=all_id+","+result.attach;
$('#uplodaer1_attachid').val(all_id);
$('#imagelist-1').append('<div class="uploaded_images" data-imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa deleter fa-trash-o"></i> </div>');
delete_binder();
thumb_setter();
}
});
}
var uploader2 = new plupload.Uploader({
runtimes : 'html5,flash,html4',
browse_button : 'upload-button-2',
container : 'upload-container-2',
file_data_name : 'upload_file',
max_file_size : $max_file_size . 'b', //maximum file size you want set
url : '<?php echo admin_url('admin-ajax.php') . '?action=me_upload&nonce='. wp_create_nonce('aaiu_allow') ?>' , //here add your ajax request function url or callback method url for example i putted link
flash_swf_url :
'<?php echo includes_url('js/plupload/plupload.flash.swf') ?>', // path for plupload.flash.swf file
filters : array(array('title' => __('Allowed Files','wpestate'), 'extensions' => "jpg,gif,png")), // filters option or validation for extension type
multipart : true,
urlstream_upload : true,
});
uploader2.init();
uploader2.bind('FilesAdded', function (up_2, files) {
$.each(files, function (i, file) {
// console.log('append'+file.id );
$('#aaiu-upload-imagelist-2').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up_2.refresh(); // Reposition Flash/Silverlight
uploader2.start();
});
uploader2.bind('UploadProgress', function (up_2, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
// On erro occur
uploader2.bind('Error', function (up_2, err) {
$('#aaiu-upload-imagelist-2').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up_2.refresh(); // Reposition Flash/Silverlight
});
uploader2.bind('FileUploaded', function (up_2, file, response) {
console.log(response.response);
var result = $.parseJSON(response.response);
// console.log(result);
$('#' + file.id).remove();
if (result.success) {
var all_id=$('#uplodaer2_attachid').val();
all_id=all_id+","+result.attach;
$('#uplodaer2_attachid').val(all_id);
$('#imagelist-2').append('<div class="uploaded_images" data-imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa deleter fa-trash-o"></i> </div>');
delete_binder();
thumb_setter();
}
});
$('#aaiu-uploader-1').click(function (e) {
// uploader2.destroy();
uploader.start();
e.preventDefault();
});
$('#aaiu-uploader-2').click(function (e) {
uploader_upc.start();
e.preventDefault();
});
});
</script>
Comments
Post a Comment