Plupload: Select files button doesn't work when it is inside a Bootstrap modal

Question

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?

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();
})