Flash FileInput + Twitter Bootstrap Button Dropdown component not able to get selected file more than once

[john-bai]

Hi jayarjo,

I have a fiddle here that attempts to use a mOxie FileInput with its container as a dropdown menu item in a 2.3.2 Twitter Bootstrap Button Dropdown component. The fiddle has steps to reproduce, expected, and actual observations. http://jsfiddle.net/aqxDd/5/

The FileInput in unable to register that it has a file on the second file selection attempt. Given the implementation of the Button Dropdown, the FileInput's container element's parent (ul class="dropdown-menu") will have a display:none style when closed and display:block when open.

I believe the toggling of display:none/display:block may be a clue into the reason the FileInput can't get a file the second time, but I'm unfamiliar with swf objects and how they behave when their display is toggled. I can assure that the swf object is displayed at the time when it is used, but when inactive it is not displayed.

Do you think it's possible to get this type of file selection experience to work with moxie?

[jayarjo]

swfs and xaps are very sensible to being in a container having display:none and used to reinitialize in such case, successfully losing all internal data, including file references. Actually Firefox at one moment didn't even allow to move the object around in the DOM (resulted in a reinitialization). Typical approach to the problem in such case would be placing swf (moxie that is) in the outer container that is not affected by display: none and then calling fileInput.refresh() on it every time the actual file picker button is shown (this repositions and rescales the flash shim to match the picker again). FileInput also has a disable() method, that makes file picker not clickable (useful to avoid any intervention while visual picker button is hidden). Call it with false as the only argument to re-enable the flash shim - disable(false).

[john-bai]

Thanks so much for looking at it. I'll try your suggestions tonight and, if I get it working, I'll update the fiddle as a working example for future users :)

[jayarjo]

Something like this: http://jsfiddle.net/aqxDd/11/

But there several problems there. I never used bootstraps dropdown myself, so not exactly familiar with it. Shouldn't it throw some events when dropdown is shown and hidden? Trying to hook onto a click event, etc is faulty, since dropdwon can be closed for example by clicking outside of it anywhere on the page and then the logic is suddenly broken.

For myself I have noted that there should be a way to figure out a proper zIndex for the picker when browse button is buried so deep in DOM structures... hm.

[john-bai]

Thanks for this awesome fiddle! I made a few changes to address the problems you mentioned, and I think it's good to go now: http://jsfiddle.net/eP9cP/5/

You're right, this dropdown plugin is pretty simple and doesn't provide any events to indicate that the dropdown menu is open or closed. I added some click handlers for both the dropdown-toggle button and the document to handle the cases where a user clicks the button or somewhere else on the page. (credit to http://stackoverflow.com/a/12535148)

Thanks so much for checking this out and coming up with a great solution!

[jayarjo]

Actually there are meant to be some events according to the docs here.

[john-bai]

Ah yes, good to see they added events to the latest version of Bootstrap (3.0). We're actually messing with 2.3.2 in this example, so can't use them yet :)

[jayarjo]

I see. But can't you use js from version 3? Are there any conflicts?

[jayarjo]

Here: http://jsfiddle.net/aqxDd/14/ works perfectly.

[john-bai]

Nice! Had to remove line 24 and it worked on the second file selection: http://jsfiddle.net/aqxDd/15/

//deleted
$('#pickfiles-container').dropdown('toggle');

[jayarjo]

Something strange about that dropdown, it should work according to the docs. But it should close after file is selected right?

I made a workaround here (kinda): http://jsfiddle.net/aqxDd/16/.