How to use multiple instances of plupload on single form

1 Views

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/.

Read More

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??

Post Views: 1

Related posts

Leave a Reply

6 comments 

  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 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

  5. You may want to use multiple DOM IDs for starting the upload:

    browse_button: ['btn-upload-start', 'area-upload-start'],

    Full config example:

    new plupload.Uploader({
    // multiple upload launcher DOM IDs
    browse_button: ['btn-upload-start', 'area-upload-start'],

    // or a single upload launcher button
    //browse_button: 'btn-upload-start',

    // ID of drag-n-drop area
    drop_element: 'area-drop',

    // server URL for processing uploaded file
    url: '/gallery/upload-image.php',

    // some fancy options - files size, file types, ..
    max_file_size : 1024*1024,
    filters : {
        mime_types : [{
            title : "Image files",
            extensions : "jpg,jpeg,png,gif" // remove white spaces
        }]
    },

    // additional POST params
    multipart_params: {
        'param1' : 'value1',
        'param2' : 'value2'
    },

    // setup JS handlers
    init : {

        FilesAdded : function(up, files){
            // invoked on upload start - files are now being sent to server
            // sample - add BS4 spinner to upload button
            $("#btn-upload-start").append('<div id="up-spinner" class="spinner-border spinner-border-sm float-right" role="status"></div>');
            up.start(); // autostart upload
        },

        FileUploaded : function(upldr, file, object){
            // process server response - files should be now uploaded on server
            $("#up-spinner").remove();

            var response = $.parseJSON(object.response);

            if(response.errorMsg){
                alert(response.errorMsg);
            }else if(response.url){
                // e.g. update image thumb
                $("#some-image-container").css({
                    backgroundImage : 'url('+response.url+')'
                }).hide().fadeIn();
            }

        },

        Error : function(up, error){
            $("#up-spinner").remove();
            alert(error.message != undefined ? error.message : 'Connection error!');
        }
    }
}).init();

    See documentation.

  6. Try this

    // html
<div data-upload-zone="plate1_1">

    <button type="button" class="file-upload-button" data-file-upload="img_url"><span class="glyphicon glyphicon-file"></span>點選此上傳檔案</button>
    <a href="javascript:;" data-action="uploadfiles">[Upload files]</a>
    <p class="file-tips">
      支援類型：<span class="file-tips-mime-types red">{{檔案副檔名}}</span><br>
      檔案上傳上限：<span class="file-tips-max-file-size">{{檔案大小}}</span>
    </p>
    <hr>
    上傳清單：<br>
    <span class="filelist">filelist</span>
</div>

<br />
上傳2
<div data-upload-zone="plate1_2">

    <button type="button" class="file-upload-button" data-file-upload="img_url"><span class="glyphicon glyphicon-file"></span>點選此上傳檔案</button>
    <a href="javascript:;" data-action="uploadfiles">[Upload files]</a>

    <p class="file-tips">
        支援類型：<span class="file-tips-mime-types red">{{檔案副檔名}}</span><br>
        檔案上傳上限：<span class="file-tips-max-file-size">{{檔案大小}}</span>
      </p>
    <hr>
    上傳清單：<br>
    <span class="filelist">filelist</span>
</div>

    JS+jQuery

    $('[data-file-upload]').on( "init", function() {
    var $domEle = $(this);

    var uploader = new plupload.Uploader({

        runtimes : 'html5,flash,silverlight,html4',
        browse_button : $domEle.get(0),  // here
        container: $domEle.parent().get(0),
        ...

    });
});