Plupload only uploads on every second file

Question

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>

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