Using the camera with the XPages Mobile Controls - xpages

Question

In my XPages Mobile Controls singlePageApp I want to provide an interface for the user to upload a new photo or choose an existing photo from their photo library on their phone. I am using the following code:
<xp:fileUpload id="fileUpload1" value="#{document1.CapturedImage}" useUploadname="false"
filename="camerasnap.png" accept="image/*">
</xp:fileUpload>
The above works fine WHEN the user chooses to launch my mobile app from an icon that they added to their home screen (i.e. in standalone mode).
However, if they launch from their mobile web browser (i.e. web application mode) when they tap the fileUpload to "Choose File" they can attempt to take a picture or select an existing photo but they are always returned to the page with "no file selected" next to the [Choose File] button.
What can I do to enable the camera/photo selection for my web application mode users ... ie most users?

Answer 1

This is a modified version from XControls 1.5 Sampler:
<xp:fileUpload id="fileUpload1" styleClass="fileInput"
style="position:absolute;
width:100%;
min-height: 182px;
opacity:0;"
value="#{document1.CapturedImage}"
useUploadname="false"
filename="camerasnap.png"
accept="image/*">
<xp:this.attrs>
<xp:attr name="accept"
value="image/*">
</xp:attr>
<xp:attr name="type"
value="file">
</xp:attr>
<xp:attr name="capture"
value="camera">
</xp:attr>
<xp:attr name="onchange">
<xp:this.value><![CDATA[
var file = event.target.files[0];
unp.photoUploader.loadImage(file);
]]></xp:this.value>
</xp:attr>
</xp:this.attrs>
</xp:fileUpload>
Try adding browser object element attributes using <xp:attr>. Cheers.

Answer 2

The solution is to put the fileUpload on a separate XPage and then source it in an iframe on the appPage.
Very eloquently presented by dominoguru Chris Toohey in blog post with accompanying video here:
http://www.dominoguru.com/page.xsp?id=xpage_fileupload_extlib_dialog_tutorial.html