DecSoft Support - Input File pick image and or capture image

Input File pick image and or capture image

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Take a look at some frequently asked questions about us and our products!

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Mario Steinbacher

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!

DecSoft

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:


document.addEventListener("deviceready", function () {

  if (app.cordova.device.platform() === 'iOS') {
    // Note the usage of the control's name + the -input suffix
    $('#file1-input').removeAttr('capture');
  }

}, false);

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:


<!-- Note the usage of the input's name + the -input suffix -->
<label for="file1-input">
 <i class="fas fa-cloud-upload-alt fa-5x text-success"></i>
</label>

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.

Purchase one or more licenses of our products if they are useful to you!

Mario Steinbacher

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!

DecSoft

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!

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.