Plupload button: Select files does not work if it is in the Bootstrap modal module

Question

Plupload The Select Files button does not work when it is inside Bootstrap modal .

Problem

The problem seems to exist on Apple devices such as the iPad and iPhone. I 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 these devices work.

Demo

Here is a demo to illustrate the problem (note that you will need to look at the iPad or iPhone to see the problem):

JSFIDDLE

Notes

Interestingly, if I move the following inscription outside the .modal element .modal that the "Select Files" button is visible on the page’s initial loading, the problem disappears.

 <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 make the “Select Files” button work inside the modal for iPhone and iPad?

Answer 1

PLupload has problems with rendering inside initially hidden elements. After the dialog box appears, you should update plupload. Add this code immediately after uploader.init()

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