Home » Wordpress » Plupload only uploads on every second file

Plupload only uploads on every second file

Posted by: admin November 30, 2017 Leave a comment

Questions:

I’m working on an image gallery plugin for WordPress and I’m trying to enable drag & Drop for Plupload.

I’m not sure what’s wrong, but my upload.php file is called only when I drop the second file intro the drop area and then the upload.php is called twice.

Has anyone else experienced this? Any help is greatly appreciated.

Update


I’ve discovered why upload.php is not fired until the second file is added.

If I remove up.start(); in uploader.bind('FilesAdded'... and put it in the Plupload initiation:

var uploader = new plupload.Uploader({
    (...)
    init : {
      FilesAdded: function(up, files) {
        up.start();
      }
    }
    (...)
});

This however enables me to execute drop_area_visual_feedback(up) function before file is added. Even if I put this function in uploader.bind('Init'... up.start() is triggered and thus fires upload.php.

Any suggestions to how I can solve this?


Here is my test code:

// JS Code

var sim_gal_data = JSON.parse(JSON.stringify(sim_gal_data_arr));

var uploader = new plupload.Uploader({
    runtimes : 'html5,silverlight,flash,browserplus,gears,html4',
    drop_element : 'drag-drop-container',
    browse_button : 'plupload-file-browser-button',
    container : 'media-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) {
  var debug = jQuery('#debug').html();
  debug += up.files.length + ', ';
  jQuery('#debug').html(debug);
  up.refresh();
  up.start();
});

uploader.init();


// 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="drag-drop-container">
  <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" /></p>
  </div>
</div>

<p><label>Debug data:</label><div id="debug"></div></p>

<div id="media-container" class=""></div>
Answers:

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.

Questions:
Answers:

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>