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>

Comments

Popular posts from this blog

How to add a custom sorting or order by option on category archive or product archive page in woocommerce wordpress

How to create a custom wp_list_table and bulk action in wordpress

How to add image option in nav menu in wordpress