feat: consistent file input behavior on android

mikejpeters commented 1 year ago

Feature Request

Description

When using <input type="file"> on Android, allow the user to choose what app to use (e.g. Camera or Files), unless the behavior is restricted by accept or capture attributes.

Current behavior on Android with Capacitor seems to be:

If capture attribute is present, and IMAGE_CAPTURE action is defined in AndroidManifest.xml then open the camera,
Otherwise open the file browser

This differs from the behavior in Chrome for Android or Capacitor on iOS, both of which let the user choose between multiple apps when the capture attribute isn't set.

Platform(s)

Android

Preferred Solution

Show an app chooser an Android depending on the accept and capture properties:

If capture attribute is present, then directly open camera
If accept attribute is used to only include types that aren't images, then directly open file browser
Otherwise show an app chooser, which should include at least Camera and File options

Also document that on Android it's necessary to add the following code to AndroidManifest.xml in order to show the camera from a file input:

    <queries>
        <!-- So camera can be opened from `<input type="file" capture>` -->
        <intent>
            <action android:name="android.media.action.IMAGE_CAPTURE" />
        </intent>
    </queries>

Alternatives

Document the differences in behavior between Android and web/iOS, as well as a suggested workaround (e,g, implementing a custom action sheet or popover with options for Camera and Files).

Additional Context

diffusi-on commented 8 months ago

Having same issue. On app made with capacitor for android I can only open neither camera or file selector, depending on inpute[type=file] caputre attribute. While checking same in Chrome it offers picker to choose between camera or files app. Any one found solution already?

Capacitor v. 5.4.0 Android v. 13

diffusi-on commented 8 months ago

@mikejpeters were you able to fix this or mb found some workaround?

LetrixZ commented 8 months ago

@mikejpeters were you able to fix this or mb found some workaround?

A possible workaround would be to just ask the user if they want to pick a file or take a photo. Although in iOS, picking a file would display both options.

mikejpeters commented 8 months ago

For my own app I made sure to add the queries to the AndroidManifest.xml as described above, and then added a custom UI component that lets the user pick what to do, the basic code looking something like this:

<label>
  Photo library
  <input type="file" accept="image/*" />
</label>
<label>
  Take photo
  <input type="file" accept="image/*" capture />
</label>
<label>
  Choose file
  <input type="file" />
</label>

(with CSS to hide the actual file inputs, and then binding to the change event of the file inputs to get the file after the user takes the photo / chooses a file)

Aarbel commented 5 months ago

Looks like this cordova plugin solves the problem: https://www.npmjs.com/package/cordova-plugin-android-image-file-input

Can capacitor teams include the same workaround in the next updates ?

Aarbel commented 2 weeks ago

Some news happened here: https://github.com/apache/cordova-android/pull/1609

That would be great that the capacitor team performs the same update !

ionic-team / capacitor