Input File pick image and or capture image

Hello David!

I have a question about how to pick and or capture an image with the Input File Control.

How to ...

• only pick an image
• only capture an image
• let the user decide to pick an image or capture a new image

I have set the Accept value to image/* or .jpg or .jpeg (Capture is on Environment, Multiple false) but on ios always the camera opens and on android always the file picker opens.

I hope you understand what I mean.

I have not found a sample for these usecases (or I'm blind)

best regards

ps: Thank you for the sidebar feature :) you are awesome!

Hello Mario,

After some research and according to the specification, but, mainly after to some tests too, in order to get your desired behaviour on iOS, the capture attribute must be NOT specified. I think you must play with the possible user's options (pick, capture image) and the OS in which the app is running, to get what you wanted.

Try firstly to remove the capture attribute if you are on iOS (you can use the Cordova Device plugin, for example, to know if the app run on iOS). You can use the app's view Show event, for example, and a code like the below:

Talking about Android, we have another issue... I try several different approach, and, can't get the camera working from the file input: the file's picker is always show. Apparently there is a bug / issue in Apache Cordova on this point. So here is what I will try / do in your case:

1º Use the input file, but, not the input file itself: we can hide the input file and use a label control referring to the input file, or an HTML control which contains a label referring to the input file: doing this we can "launch" the input file, but, not by using the input file control itself. So place the input file out of the view and set his Hidden property to "true", and then, use some HTML markup inside an HTML control like the below one:

2º We must look if the app run on iOS or Android. If we run on iOS, we can remove the capture attribute (like above) if we want to use the file picker / camera or leave the attribute if we want to use the camera.

3º If we the app run in Android, we must use the file input if we want to use the file picker, or, we must use the Apache Cordova Camera plugin if we want to use the camera. To get this last working I think we must remove the "for" attribute of the file input's label, and, react to a click on that label control, so we can launch the camera using the Apache Cordova Camera plugin.

4º We can also take the 3 step / point on iOS if we want to use the Camera, that is, use the Apache Cordova Camera plugin if we wanted, instead of the input file.

Another possibility can be to avoid the File Input usage (at least in Android and iOS) and use the Apache Cordova Camera plugin, since we can use that plugin for both: take a photo from the camera but also pick a image from the gallery (look at the CordovaCamera sample app). So maybe can be a good idea (due to the above) to use the Apache Cordova plugin, except for platforms different than Android and iOS.

Please, Mario, take your time, make some tests and finally go ahead if you have any further questions around this.

Thank you David!

I endet up with your fourth solution with two buttons one for select and one for capture.

Because and Android and iOS app only.

Thank you!

Hello Mario,

Thank you David!

I endet up with your fourth solution with two buttons one for select and one for capture.

Because and Android and iOS app only.

Thank you!

Always thank you for your trust!