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 image option in nav menu in wordpress

How to change user id on checkout page for assign order to different user in woocommerce wordpress

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