How to use multiple instances of plupload on singl

Question

I want to use multiple instances of plupload on single form. I saw the following link. But i dnt know how to implement that in wordpress.

jsfiddle.net/X65zF/36/.

So I can upload images from first upload link, then documents from second upload 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...Anyone has done this kind of thing??

Answer 1

//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 looked for that script but didn't get any best solution , after that I made this code.

plupload multiple instance in single form or single page

Answer 2

You can init plupload like this

$(".uploader").plupload({

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

Answer 3

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

Plupload multiple instances

Answer 4

try to create new instance of uploader with another name and try with uploader2 and bind with QueueChanged .