In input type file is does not shows the option of camera in android platform

developer-wovvtech · March 16, 2020, 12:33pm

Hello,

 <input type="file" accept="image/*;capture=camera">

is does not showing the options of camera in android platform, it is working in ios platform. please help me to solve this issue .

i am using ionic version 4.1.2,

Thanks

mhartington · March 16, 2020, 1:25pm

Depending on he version of Android you are testing on, this might not be supported. What is the android OS version you are deploying to?

https://caniuse.com/#feat=input-file-accept

developer-wovvtech · March 17, 2020, 3:36am

thanks for reply,
i am deploying my app to android version 7.0.0

j-carignan · April 12, 2020, 1:45am

Hello! I am also facing this issue using the latest Ionic 5.0.7 and Capacitor 2.0.0.
It works fine using Chrome on Android to visit the webapp version of my Ionic project, but not when using the native app compiled with Capacitor. I can select previously taken pictures, but no option to use the Camera.

j-carignan · April 13, 2020, 4:35pm

Anybody? I tried multiple values for the accept prop, still not showing up the camera on Android…

aaronksaunders · April 13, 2020, 5:41pm

      <input
        type="file"
        id="file-upload"
        accept="image/*"
        capture
        @change="setImage"
      />

This works for me…

j-carignan · April 13, 2020, 7:51pm

You mean it shows the Camera in the native app compiled for Android? I have the same exact code and it doesn’t on my side

venkateshb · July 18, 2020, 10:35am

Ionic V4:
Does this even work? I have no access to trigger event from HTML input type. The scenario is I have an angular web application as micro front end which is imported as web component in my ionic app. So all i have access is to change HTML of micro app:
i tried:
<input type="file" accept="image/*;capture=camera"> which is not working…

Can we trigger camera via input type file. by default it lunches the file browser of the whatever browsers it is clicked and in android as well it launches documents directory. However it doesn’t ask for an option to choose camera or gallery. is there a way to handle this type of scenario in android and ios platforms?

aaronksaunders · July 18, 2020, 4:41pm

Yes it works, it just Javascript

venkateshb · July 20, 2020, 5:32am

For android its not working… it directly launches mobile documents

aaronksaunders · July 20, 2020, 3:06pm

Are you using the EXACT same code as I posted? Your code looks different?

danyyacoub · May 14, 2021, 12:00pm

I still have this issue with Capacitor (The part where i’m able to select between browse for files and camera)

@aaronksaunders 's solution works, but it opens the camera directly, it doesn’t let the user choose.

According to the docs

<input type="file" accept="image/*;capture=camera"> should give the option to choose between browse files and open camera, but it doesn’t work on Capacitor (it works on mobile chrome though even without the capture in accept)

Any ideas ?

Thanks

mw108 · September 30, 2022, 12:06am

It doesn’t work for me either. It always shows the file selection screen only without any option to capture from camera. No matter what combination I try:

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="image/*" capture="camera" />
<input type="file" accept="image/*" />

Doesn’t work on emulator (Android 11) or real phone (Android 12)

Ionic 6
Angular 13

What is the issue here?

KortVea · October 12, 2022, 12:35am

doesn’t work for me either for Android 11
(Doesn’t work as android app, but works as web app accessed from Chrome)

(works on iPhone both as built app and web app.)

using Ionic 6 Vue3.

Added permission for camera on android. System log shows
Media capture intent could not be launched. Falling back to default file picker.
inline with

github.com

ionic-team/capacitor/blob/3d4433b505252d263784ec0fafc72a9b7cd8591e/android/capacitor/src/main/java/com/getcapacitor/BridgeWebChromeClient.java#L358


      
              // returns a file:// URI instead of the expected content:// URI.
              // So we disable it for now because it requires a bit more work
              boolean isVideoCaptureSupported = android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N;
              boolean shown = false;
              if (isVideo && isVideoCaptureSupported) {
                  shown = showVideoCapturePicker(filePathCallback);
              } else {
                  shown = showImageCapturePicker(filePathCallback);
              }
              if (!shown) {
                  Logger.warn(Logger.tags("FileChooser"), "Media capture intent could not be launched. Falling back to default file picker.");
                  showFilePicker(filePathCallback, fileChooserParams);
              }
          }
          
          
@SuppressLint("QueryPermissionsNeeded")
          private boolean showImageCapturePicker(final ValueCallback<Uri[]> filePathCallback) {
              Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
              if (takePictureIntent.resolveActivity(bridge.getActivity().getPackageManager()) == null) {
                  return false;
              }

jcroucher · January 3, 2023, 11:21pm

I am also seeing this problem across random phones.
Specifically Motorola Moto G31 ( Android 11 ) and the Pixel 5 Emulator ( Android 12 ).

It works fine on other Android devices including ones with the same Android version.

Could it be a specific WebView version causing these devices to fail?

As others have reported it all works fine from the native browser, just not within the App.

D/Capacitor: Unable to find a Capacitor plugin to handle permission requestCode, trying Cordova plugins 190163686
W/Capacitor/FileChooser: Media capture intent could not be launched. Falling back to default file picker.

jcroucher · January 4, 2023, 10:41am

I found the issue. The AndroidManifest needs the following

<queries>
    <!-- Camera -->
    <intent>
        <action android:name="android.media.action.IMAGE_CAPTURE" />
    </intent>

    <!-- Gallery -->
    <intent>
        <action android:name="android.intent.action.GET_CONTENT" />
    </intent>
</queries>

jatton · July 31, 2023, 2:43pm

It’s sill not working for me.

I use :
<input type="file" (change)="onFileChange($event)" accept="image/*,application/pdf;capture=camera" style="display: none;" #uploadFile/>

My AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="blabla">

    <queries>
        <!-- Camera -->
        <intent>
            <action android:name="android.media.action.IMAGE_CAPTURE" />
        </intent>

        <!-- Gallery -->
        <intent>
            <action android:name="android.intent.action.GET_CONTENT" />
        </intent>
    </queries>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"

It works on web app and on iOS

jatton · August 1, 2023, 5:04pm

I have created a custom component to add a drop down menu on Android : Bitbucket

Feel free to use it.

108bits · September 21, 2023, 11:07am

None of the solutions presented here are working, which is baffling. It works fine out-of-the-box on iOS, but no chance to get it working on Android, no matter what I try. Neither in the emulator, nor on the physical device.

Various markup versions of <input type="file" ...>
Added <queries>...</queries> section to the AndroidManifest.xml as suggested by @jcroucher
Added user permissions for android.permission.CAMERA, android.permission.READ_MEDIA_IMAGES, android.permission.READ_EXTERNAL_STORAGE and android.permission.WRITE_EXTERNAL_STORAGE to the AndroidManifest.xml

Android only presents me a dialog to pick an existing file, but no chance to capture from the camera.

It would be nice if the Ionic Team could help out here @mhartington - What are we doing wrong? Why is it working on iOS but not on Android? What should we do to make it work on Android?

Thank you.

108bits · September 26, 2023, 8:59am

Thank you very much for this solution / work-around. I used it in my project aswell. Do you have PayPal so I can drop you a little donation?

Topic		Replies	Views
Different behavior in Ionic by using type file and capture attribute of a native input element Ionic Framework	0	605	June 28, 2019
<input type="file"> behaviour in a ionic app on Lollipop	7	6182	January 23, 2016
Input type file not working as expected ionic-v1	1	995	December 17, 2015
Input type="file" accept="image/*;capture=camera" not working inside iframe inside ionic blank page ionic-v1	1	8721	January 7, 2016
Capacitor use input type file to select between Camera and file browser Capacitor	0	1994	May 14, 2021

In input type file is does not shows the option of camera in android platform

Related topics