How to use multiple plupload instances in one form

Question

I want to use multiple instances of plupload in one form. I saw the following link. But I do not know how to implement this in Wordpress.

jsfiddle.net/X65zF/36/ .

Therefore, I can upload images from the first download link, then documents from the second download link, etc.

This is my html code

<a id="aaiu-uploader" class="aaiu_button" href="#"><?php _e('*Select Images (mandatory)','wpestate');?></a> <input type="hidden" name="attachid" id="attachid" value="<?php echo $attachid;?>"> <input type="hidden" name="attachthumb" id="attachthumb" value="<? php echo $thumbid;?>"> 

This is my js code

  jQuery(document).ready(function($) { "use strict"; if (typeof(plupload) !== 'undefined') { var uploader = new plupload.Uploader(ajax_vars.plupload); uploader.init(); uploader.bind('FilesAdded', function (up, files) { $.each(files, function (i, file) { // console.log('append'+file.id ); $('#aaiu-upload-imagelist').append( '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + '</div>'); }); up.refresh(); // Reposition Flash/Silverlight uploader.start(); }); uploader.bind('UploadProgress', function (up, file) { $('#' + file.id + " b").html(file.percent + "%"); }); // On erro occur uploader.bind('Error', function (up, err) { $('#aaiu-upload-imagelist').append("<div>Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + "</div>" ); up.refresh(); // Reposition Flash/Silverlight }); uploader.bind('FileUploaded', function (up, file, response) { var result = $.parseJSON(response.response); // console.log(result); $('#' + file.id).remove(); if (result.success) { $('#profile-image').css('background-image','url("'+result.html+'")'); $('#profile-image').attr('data-profileurl',result.html); $('#profile-image_id').val(result.attach); var all_id=$('#attachid').val(); all_id=all_id+","+result.attach; $('#attachid').val(all_id); $('#imagelist').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').click(function (e) { uploader.start(); e.preventDefault(); }); $('#aaiu-uploader2').click(function (e) { uploader.start(); e.preventDefault(); }); } }); 

Suggest something ... Has anyone done such a thing?

Answer 1

Try this solution. You may have n number of instances with this.

Plupload multiple instances

Answer 2

You can run plupload like this

 $(".uploader").plupload({ 

so create some divs with the .uploader class and run it as pluploaders

Answer 3

try creating a new bootloader instance with a different name and try with uploader2 and associate with QueueChanged.

Answer 4

 //javascript example 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> 

 // html code <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> 

I also searched for that script but did not get a better solution, after which I made this code.

plupload multiple instances in one form or separate page