The Plupload 'Select files' button doesn't work when it's inside a Bootstrap modal.

The problem

The problem seems to exist on Apple devices only such as the iPad and iPhone. I've tested on a Samsung Galaxy S4 Mini running Android 4.2.2 and on a Nexus 7 tablet running Android 4.4.2 and both of those devices work.

Demo

Here's a demo to illustrate the problem (note you'll need to view on a iPad or iPhone in order to see the problem):

JSFIDDLE

Notes

Interestingly, if I move the following mark-up outside of the .modal element so that the 'Select files' button is visible on the initial page load, then the problem goes away.

<div id="container">
    <a id="pickfiles" href="javascript:;">[Select files]</a>
    <a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>

My question

How can I get the 'Select files' button working inside the modal for iPhone and iPad?

The Plupload 'Select files' button doesn't work when it's inside a Bootstrap modal.

The problem

The problem seems to exist on Apple devices only such as the iPad and iPhone. I've tested on a Samsung Galaxy S4 Mini running Android 4.2.2 and on a Nexus 7 tablet running Android 4.4.2 and both of those devices work.

Demo

Here's a demo to illustrate the problem (note you'll need to view on a iPad or iPhone in order to see the problem):

JSFIDDLE

Notes

Interestingly, if I move the following mark-up outside of the .modal element so that the 'Select files' button is visible on the initial page load, then the problem goes away.

<div id="container">
    <a id="pickfiles" href="javascript:;">[Select files]</a>
    <a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>

My question

How can I get the 'Select files' button working inside the modal for iPhone and iPad?

• javascript
• jquery
• twitter-bootstrap
• plupload

• I believe the button would not make any sense on iphone because you dont get access to local filesstem, so there would be nothing to upload – rapsli Commented Nov 13, 2014 at 22:11
• Access to the local file system is possible on iPhone actually. – henrywright Commented Nov 13, 2014 at 22:31
• Right ;) tested the example on plupload. Can you debug this? Maybe in the ios simulator? – rapsli Commented Nov 14, 2014 at 5:48
• Might perhaps be due to the fact that the modal element is initially hidden …? Try initializing the Plupload when the modal contents are made visible (I’m sure bootstrap has a callback function for that or something). – C3roe Commented Nov 15, 2014 at 0:25
• @CBroe Bootstrap does have this $('#myModal').on('shown.bs.modal', function (e) { }) which I've tried but I don't think I'm using it right. Can you show me how? – henrywright Commented Nov 15, 2014 at 0:30

1 Answer 1

PLupload has issues rendering inside initially hidden elements. You should 'refresh' plupload after the dialog is shown. Add this code right after uploader.init()

$('#myModal').on('shown.bs.modal', function () {
    uploader.refresh();
})