Question

So far uploading works in Chrome on Linux, OSX and windows, and IE on Windows, but fails in Firefox for all OS’s.

The issue seems to be that no event is being bound to the attach file link which can be seen when using Allan Jardine’s Visual Event plugin.

However in the online demo http://plupload.com/example_custom.php, an event bound to the click event can be seen using the plugin.

Any idea why firefox is failing in this case?

<form action="/notes" class="new_note" data-remote="true" id="new_note" method="post">
  <h3>Create Note</h3>
  <textarea cols="40" id="note_content" name="note[content]" rows="1"></textarea>
  <table>
    <tr>
      <td id='attachments'>
        <a href="#" id="attach-files" style="display:none">Add Attachment</a>
        <a href="#" id="upload-files" style="display:none">Upload Files</a>
      </td>
      <td id='button'>
        <input class="button button-green" disabled="disabled" id="note_submit" name="commit" type="submit" value="Post Note" />
      </td>
    </tr>
  </table>
</form>

javascript

bind_plupload: function(url) {
  // plupload setup
  var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight',
    browse_button : 'attach-files',
    container : 'attachments',
    max_file_size : '2mb',
    url : url,
    multipart: true,   
    flash_swf_url : '/javascripts/plugins/plupload/plupload.flash.swf',
    silverlight_xap_url : '/javascripts/plugins/plupload/plupload.silverlight.xap',
    filters : [
      {title : "Images", extensions : "jpg,gif,png"},
      {title : "Documents", extensions : "pdf,doc,docx,odt,txt,xls"}
    ]
  });

  // push files to server after file is selected
  if ($.browser.msie) {
    $("#upload-files").show().click(function() {
      uploader.start();
      return false;
    });
  }
  else {
    $("#upload-files").remove()
    $(":file").live("change", function(e) {
      uploader.start();
    });
  }

  uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
      var msg = sprintf("<div id=\"%s\">%s <b></b></div>", file.id, file.name);
      $('#attachments').append(msg);
    });
    up.refresh(); // Reposition Flash/Silverlight
  });

  uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id + " b").html(file.percent + "%");
  });

  uploader.bind('Error', function(up, err) {
    var msg = sprintf("<div>%s%s</div>", err.message, (err.file ? " "+err.file.name : ""))
    $('#attachments').append(msg);
    up.refresh(); // Reposition Flash/Silverlight
  });

  uploader.bind('FileUploaded', function(up, file) {
    $('#' + file.id + " b").html("100%");
  });

  uploader.init();
} // bind plupload

Answer 1

In Firefox when the ‘attachments’ id was moved from the element to a newly nested tag things worked.

<td>
    <div id='attachments'>
        <a href="#" id="attach-files" style="display:none">Add Attachment</a>
        <a href="#" id="upload-files" style="display:none">Upload Files</a>
    </div>
</td>

I think this would be considered a bug.