Plupload only uploads on every second file

2 comments

1. I tried your HTML, but I kept getting an error Uncaught TypeError: Cannot read property 'currentStyle' of null

   I have working HTML/JS here, after upload it displays the image. I renamed some of the divs to ensure that hyphenated names weren’t contributing to the problem.

   JS:

   <script type="text/javascript">
       $(function() {
   
           var sim_gal_data = JSON.parse(JSON.stringify(sim_gal_data_arr));
   
           // this will be used for displaying uploaded images
           var public_url = 'http://www.path.to/your/upload/url/';
   
           var uploader = new plupload.Uploader({
               runtimes : 'html5,silverlight,flash,browserplus,gears,html4',
               drop_element : 'dropbox',
               browse_button : 'pickfiles',
               container : 'container',
               max_file_size : sim_gal_data['max_file_size'],
               url : sim_gal_data['upload_url'],
               flash_swf_url : sim_gal_data['plupload_url']+'plupload.flash.swf',
               silverlight_xap_url :  sim_gal_data['plupload_url']+'plupload.silverlight.xap',
               multi_selection : true
           });
   
           uploader.bind('FilesAdded', function(up, files) {
               $.each(files, function(i, file) {
                   $('#debug').prepend('Uploading ' + file.name + ' (' + file.size + ' bytes)');
               });
               up.refresh();
               up.start();
           });
   
           uploader.bind('FileUploaded', function(up, file, info) {
               $('#uploaded').prepend('<p><a href="' + public_url + file.name + '" target="_blank"><img src="' + public_url + file.name + '" width="100"/></a></p>');
           });
   
           uploader.init();
   
       });
   </script>
   

   HTML:

   <div id="dropbox">
     <div id="container">
       <p class="drag-drop-info">Drop files here</p> <p>or</p>
       <p><input type="button" disabled="disabled"  class="button" value="Select Files" id="pickfiles" /></p>
     </div>
   </div>
   
   <p><label>Debug data:</label><div id="debug"></div></p>
   
   <div id="uploaded"></div>
   

   Drop a single file, and wait for the time you would expect it to upload. Don’t drop another file thinking it isn’t working, all files dropped will appear in the uploaded list.

   Log in to Reply

2. You should not try to recycle your uploader for new upload while it is still uploading some files.
   I guess what you should do is instantiate new uploaders component “on-demand” and start them . Someting like below (updated js and html markup in php)

   Sorry for any syntax error, could not check it right now…
   Hope this will help

   // JS Code
   
   var InitUploader = function(i){
          var sim_gal_data = JSON.parse(JSON.stringify(sim_gal_data_arr));
   
       // create DOM  elements for uploader i
       $('#uploaders-container').append($('<div id="drag-drop-container'+i+'">
                      <div class="inside-container">
       <p class="drag-drop-info">Drop files here</p> <p>or</p>
       <p><input type="button" disabled="disabled"  class="button" value="Select Files" id="plupload-file-browser-button'+i+'" /></p>
     </div>
   </div>
   <div id="media-container'+i+'" class=""></div>
   '));
   
       // create uploader i
       var uploader = new plupload.Uploader({
          runtimes : 'html5,silverlight,flash,browserplus,gears,html4',
          drop_element : 'drag-drop-container'+i,
          browse_button : 'plupload-file-browser-button'+i,
          container : 'media-container'+i,
          max_file_size : sim_gal_data['max_file_size'],
          url : sim_gal_data['upload_url'],
          flash_swf_url : sim_gal_data['plupload_url']+'plupload.flash.swf',
          silverlight_xap_url : sim_gal_data['plupload_url']+'plupload.silverlight.xap',
          multi_selection : true
         });
   
       uploader.bind('FilesAdded', (function(j){return function(up, files) {
          up.start();
          $('#drag-drop-container'+j).hide(); // only the new uploader drag-drop zone should be visible
          InitUploader(j+1);           
       };})(i));
   
       uploader.bind('FileUploaded',function(upl,file,response){
         // do some response processing, at your will
         });
   
       uploader.bind('UploadComplete', function(upl, files){
          // ... do some processing
          upl.destroy(); // for example. Should destroy the corresponding DOM elements too (drag-drop-container+'i' and possibly 'media-container'+i)
       });
   
      uploader.init();
   }
   
   $(document).ready(function(){InitUploader(0);});
   
   // PHP Code
   
   $sim_gal_data_arr = Array(
     'upload_url' => SIMPLE_GALLERY_PLUGIN_URL.'upload.php',
     'plupload_url' => includes_url('js/plupload/'),
     'max_file_size' =>  wp_max_upload_size() . 'b'
   );
   
   ?>
   <script type="text/javascript">
       var sim_gal_data_arr = <?php echo json_encode($sim_gal_data_arr); ?>;
   </script>
   <?php
   
   <div id="uploaders-container">
   </div>
   
   <p><label>Debug data:</label><div id="debug"></div></p>
   

   Log in to Reply