Filepicker widget doesn't work within InlineAdmin

[jonasvp]

I have an FPUrlField within a Django admin inline model which works fine at first. However, when clicking on "add another" below the currently visible inlines, the newly appearing "Pick File" button does not pop up the Filepicker panel as expected. Instead, it submits the form and saves the model.

I'm guessing that Filepicker's JS API only adds the "Pick File" button's click event handler when it's visible on first page load. Since the additional forms that the Django admin adds are invisible at first, the event handler doesn't get attached and the button ends up working as a regular "submit" button.

I'm not sure how to solve this. Maybe adding a method to the JS API that makes it go through all widgets again and re-attach the event handler?

[jonasvp]

To anyone having the same problem: we had to fall back to some custom JS to do it. We defined the field as an URLField and added this JS:

$(function () {
  // you'll have to customize this selector, our field is called "upload"
  $('input[name$='upload']:not(.filepicker-io)').each(function() {
    var $this = $(this);
    $this.addClass('filepicker-io');
    $this.hide().before('<button class="filepicker-io">Pick file</button>');
  });
});

$('button.filepicker-io').live('click', function(ev) {
  ev.preventDefault();
  var $input = $(this).next();
  filepicker.setKey('FILEPICKER_API_KEY');
  filepicker.pick({
    mimetypes: ['video/*'], // customize mime type
    container: 'modal',
    services: ['COMPUTER','URL'] // customize services
  }, function(fp_file) {
    $input.val(fp_file.url);
  }, function(fp_error) {});
});

Hope it helps someone. In the future, it would probably make sense for filepicker's JS to use some sort of event delegation to catch all future instances of the filepicker button.