cmlenz/jquery-iframe-transport

File input events

Opened this issue · 2 comments

When I try to bind change event to file input:

$file = $('<input type="file" name="file" multiple>')
     .appendTo('form').change(function(){
           that.onFileChange();
     });

This works for first upload, but next fail. As I understood, the elements are replaced. Please add replacing events to.

I have had this issue trying to use this code too, it seems to be due to this code:

  // Move the file fields into the hidden form, but first remember their
  // original locations in the document by replacing them with disabled
  // clones. This should also avoid introducing unwanted changes to the
  // page layout during submission.
  markers = files.after(function(idx) {
    return $(this).clone().prop("disabled", true);
  }).next();
  files.appendTo(form);

As a result, your code is moved into IFRAME and won't run the second time.

The easiest solution for the author of this product would seem to be putting the clones in the IFRAME instead, or perhaps using something like clone(true) to also clone events.

The easiest workaround for the users of this product I found was to use live type events, i.e. the selector parameter of the 'on' function.

This is actually due to the commit in this pull request: #24 (comment)

I have asked the author to revert the commit.

The issue is that he is not putting back the original file inputs after replacing them with markers.

If you look at the code for the linked pull request you can see the offending code.