bug: Camera cannot select picture from Redmi Gallery app

Bug Report

Capacitor Version

npx cap doctor output: Installed Dependencies: @capacitor/ios not installed @capacitor/core 1.2.1 @capacitor/cli 1.2.1 @capacitor/android 1.2.1

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

Using the Camera plugin on Android Redmi phones, when a picture is selected in the Gallery app, this error is thrown: Unable to process image. It doesn’t manifest itself with other apps (e.g. File Manager) and also there was no problem with the Cordova plugin which we used before upgrading to Capacitor.

Expected Behavior

Users are able to use the default Gallery app to select their pictures on Redmi phones.

Sample Code or Sample Application Repo

This is the config we use: const options: CameraOptions = { quality: 30, resultType: CameraResultType.Uri, allowEditing: false, source: CameraSource.Photos, };

Reproduction Steps

Configure the Camera plugin to return a Uri and use the option to select a picture from gallery instead of taking a new photo.

Other Technical Details

• Phone: Redmi 6A/Redmi Note 7
• Android version: 8.1/9
• MIUI version: 10.3.6/10.3.6

Other Information

I suspect the bug concerns other MIUI devices, such as Xiaomi phones. I managed to track down the problem to saveTemporaryImage method in Camera.java. contentUri.getlastPathSegment tries to select the filename and a copy of the file is created in the cacheDir.

However, contentUri from the Gallery app has this format: content://com.miui.gallery.open/raw/%2Fstorage%2Femulated%2F0%2FDCIM%2FCamera%2FIMG_20191013_191506.jpg

while the other apps return unescaped slashes in the path, e.g. content://com.mi.android.globalFileexplorer.myprovider/external_files/DCIM/Camera/IMG_20191013_191506.jpg

I created an easy solution for our app (using a random filename) but this is probably a symptom of a more serious issue and I don’t know what the proper fix would be. Is it enough to just unescape the path?

[jirifranc]

As no one from the Capacitor team has replied, I’ll at least give you a workaround.

1. Created a file called named patch-camera.js in the project root folder with this content:

const fs = require("fs");
const f =
  "node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/Camera.java";

fs.readFile(f, "utf8", function(err, data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(
    "String filename = contentUri.getLastPathSegment()",
    'String filename = "file"'
  );

  fs.writeFile(f, result, "utf8", function(err) {
    if (err) return console.log(err);
  });
});

As you can see, this fix is very fragile as it relies on the specific node_modules path and Java source code. This ensures that a timestamp is used for the file name instead of the broken name from the Gallery app.

1. Add the postinstall script to your package.json to patch the Capacitor source code.

 "scripts": {
    "build": "ng build --prod && npx cap sync",
    "postinstall": "node patch-camera.js"

This automatically runs the fix after npm install and works perfectly with @capacitor/android": “^1.2.1”. We haven’t updated to 1.3 yet.

[stevebrowndotco]

On Samsung 21 I get the error: (via logcat in android studio)

2021-08-09 19:50:40.705 32410-32410/com.ionicframework.chalk208279 E/Capacitor/Console: File: http://192.168.0.12:8100/vendor.js - Line 46093 - Msg: ERROR Error: Uncaught (in promise): Error: Unable to process image
    Error: Unable to process image
        at Object.cap.fromNative (http://192.168.0.12:8100/:429:32)
        at <anonymous>:1:18

This happens when (as a user) I attempt to add an image from the stock gallery.

WORKS with camera