bug: Camera cannot select picture from Redmi Gallery app #2060

jirifranc · 2019-10-16T14:26:15Z

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?

The text was updated successfully, but these errors were encountered:

wanaideed · 2019-11-05T16:04:30Z

I got the same problem with you.

alifrontend499 · 2019-11-06T06:54:39Z

The same problem I'm facing

jirifranc · 2019-11-06T09:54:24Z

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

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.

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.

jcesarmobile · 2020-01-16T19:20:54Z

do you know if it's possible to install the miui gallery in a not xiaomi device?
I've tried in different apps and they work fine.

jirifranc · 2020-01-21T10:53:58Z

I haven't tried to install the APK manually but the app doesn't seem to be available at the Play Store. The problem is this Gallery is the default one for Xiaomi/Redmi users and while the hack is simple, it's not a long-term solution as we have to check the source code with each release to make sure it doesn't break.

We ran into this issue immediately after migrating from Cordova but hoped it would be fixed quickly.

lucasrleandro · 2020-01-22T10:41:22Z

Hello, I am facing this same problem with xiaomi. Our business really needs the camera and our customers are complaining. I think I will try this workaround, but is there any prediction of a definitive solution?

tato469 · 2020-03-03T09:00:00Z

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

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.

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.

This worked for me, hope we could get "not patched" solution soon :)

nikosdouvlis · 2020-05-27T08:07:29Z

I can confirm the same issue. Picking an image via the default Xiaomi gallery app results in a "Unable to process image" error. Other gallery apps seem to work, but its a blocker for us since most people with xiaomi devices use the default gallery app.

The patched version and the old cordova plugin work for now

HamoudaAmine · 2020-07-15T13:51:48Z

same issue on Xiaomi gallery

shahidmau · 2020-07-23T11:39:33Z

I acknowledge the exactly same issue on my Xiaomi phone while selecting photo from the gallery. Here is my adb log.

07-23 17:08:25.212 29040 29040 D Capacitor: Sending plugin error: {"save":false,"callbackId":"49711431","pluginId":"Camera","methodName":"getPhoto","success":false,"error":{"message":"Unable to process image"}}
07-23 17:08:25.215 29040 29040 D Capacitor: App restarted
07-23 17:08:25.216 29040 29040 D Capacitor: App started
07-23 17:08:25.218 29040 29040 D Capacitor/App: Firing change: true

shahidmau · 2020-07-23T11:43:56Z

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

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.

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.

This fix is working for me, thanks.

ferdiaddawy · 2020-08-08T05:30:25Z

I also have the same problem, when I upload a file from the gallery (the default xiaomi application) it doesn't work, but when I use the default Google Photos app it works

Note: the device that I use redmi note 8

manel00 · 2020-08-20T14:50:26Z

It fixes also this? cannot run cam on my phone when deploying a capacitor ionic app :S

aren1989 · 2020-09-03T08:02:37Z

same issue on Xiaomi gallery

DoveAz · 2020-09-10T14:44:02Z

same issue

lucasrleandro · 2020-10-27T19:40:55Z

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

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.

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.

Works!!! Thanks @jirifranc 😄

The problem seems to be the encoded URI. The aforementioned line `String filename = contentUri.getLastPathSegment()` is really the real point of failure. On a redmi phone (maybe some others too?), the `contentUri` points to something like `content://com.miui.gallery.open/raw/%2Fstorage%2Femulated%2F0%2FDCIM%2FCamera%2FIMG_20210301_082750.jpg`. So you see the encoded part. `getLastPathSegment()` extract the whole `%2Fstorage%2Femulated%2F0%2FDCIM%2FCamera%2FIMG_20210301_082750.jpg` part, then decodes and returns it. Eventually, the follow outFile got a path like `...package..name.../cache/storage/emulated/0/DCIM/Camera/IMG_20210301_082750.jpg`, and you see where it crashes. I'm not sure if I'm doing it the tidy way, it's the most straightforward way I can think of.

MilotH2 · 2021-03-03T13:55:35Z

The patch no longer works for me... "@capacitor/android": "^2.4.6",

koczka · 2021-04-15T08:53:06Z

The patch no longer works for me... "@capacitor/android": "^2.4.6",

Same here

jirifranc · 2021-04-19T17:27:56Z

I've updated Capacitor (core, android, and cli) in our app to 2.4.7 and the patch is still working. Please open the file node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/Camera.java and check the line starting with String filename = (there is only one).

You can also replace the line according to @eidng8's fix above which hopefully gets merged into Capacitor 3.

balazsotakomaiya · 2021-05-13T22:14:01Z

There are certainly a lot of markets where Xiaomi and Redmi phones are commonplace – so much so in my case, that about 40% of my Android users use one.

I'm really surprised, especially with a PR outstanding, that the Capacitor team isn't merging it, nor commenting on the issue.

jcesarmobile · 2021-05-24T17:40:31Z

should be fixed on latest version @capacitor/camera plugin (requires capacitor 3)

if you still face the issue, create a new issue on https://github.com/ionic-team/capacitor-plugins/issues and provide a sample app where it can be reproduced

czabaj · 2021-07-14T07:04:29Z

I encountered this issue on an old Samsung Galaxy J3, the problem persisted even after an upgrade to capacitor@3. I downgraded the capacitor back to v2, as I have a problem debug the native code of the plugins in v3, and found out the exception is thrown in code that corrects the orientation of the image.

Solution

By disabling rotation with correctOrientation: false I resolved my issue.

Further investigation

I got a

java.io.FileNotFoundException: /-1/1/content:/media/external/images/media/376/ORIGINAL/NONE/image/jpeg/1205681957 (No such file or directory)

from the prepareBitmap function

by digging deeper, it turned out, that the failing code was imageUri.getPath(), a quick search revealed a StackOverflow thread where this comment notes

The Uri that you are attempting to open is content://document/image:26171. You need to access it with a ContentProvider.

I'm a newbie in Android development, but it seems that the Samsung Gallery does not provide a regular file URI, thus the Camera plugin must use ContentProvider to handle the URI.

Additional informations

I checked the capacitor v3 Camera plugin source code and it seems to me that it is exposed to the same issue by using Uri.getPath(), but I did not test it, as I have a problem debug the native code of capacitor v3. Also, during the debug of capacitor v2, I realized, that I completely miss the Gradle variable

androidxExifInterfaceVersion = '1.2.0'

which might be necessary for the Camera plugin to work correctly, but on Capacitor v2, the Camera plugin worked even without this variable.

AdlerJS · 2021-07-19T16:21:10Z

@czabaj I also confirmed the same issue on a newer galaxy S10. correctOrientation: false did resolve the issue for me but images are now uploaded the wrong orientation for portrait photos when sending to the server.

mattmilan-dev · 2021-07-30T22:49:52Z

We've also had a few users also state that image uploading is not working across the Samsung device list only; Pixels seem to be unaffected by this. Not to repeat what @czabaj has said, but I'm also thinking it's to do with Samsung's photo gallery returning incorrectly, although the specific error i get is /external/images/media/389: open failed: ENOENT (No such file or directory). As stated, correctOrientation: false does solve the issue but leaves the returned image rotated 90 degrees anticlockwise. This has occurred after our apps migration to capacitor 3 and was not a problem on v2.

As a temporary work around, you can turn the lines here in the plugin (android/capacitor-camera/src/main/java/com.capacitorjs.plugins.camera/ImageUtils) to the following:

 if (orientation != 0) {
      Matrix matrix = new Matrix();
      matrix.postRotate(orientation);
      return transform(bitmap, matrix);
  } else {

and rebuilding should allow it to work for now.

jonmbennett · 2021-07-31T14:35:29Z

We've also had a few users also state that image uploading is not working across the Samsung device list only; Pixels seem to be unaffected by this.

Thanks Matt for your temporary fix. Yesterday I had this issue affect my personal Pixel 3 XL too, though now I am having trouble reproducing it. At the least I can confirm it does seem to happen consistently on Samsung phones.

There is a pull request with a fix too: ionic-team/capacitor-plugins@1bde69c

stevebrowndotco · 2021-08-09T18:53:10Z

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

Euxiniar · 2021-08-13T22:02:57Z

 if (orientation != 0) {
      Matrix matrix = new Matrix();
      matrix.postRotate(orientation);
      return transform(bitmap, matrix);
  } else {

This fix works for me with a Xiaomi. Does anyone knows if the Capacitor team is on it ?

mendo96 · 2021-08-13T22:26:39Z

 if (orientation != 0) {
      Matrix matrix = new Matrix();
      matrix.postRotate(orientation);
      return transform(bitmap, matrix);
  } else {

This fix works for me with a Xiaomi. Does anyone knows if the Capacitor team is on it ?

thank you buddy, that did the job !

AlexJurik · 2021-11-23T12:37:07Z

After Capacitor upgrade to v2.5.0 mix of workarounds mentioned above helped us with issue on Xiaomi devices.
patch-camera.js file.

const f =
  "node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/Camera.java";
const f2 =
  "node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/camera/ImageUtils.java";

// Workaround for Capacitor camera issue https://github.com/ionic-team/capacitor/issues/2060
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);
  });
});

// Inspired by https://github.com/ionic-team/capacitor/issues/2060#issuecomment-890225244
fs.readFile(f2, "utf8", function (err, data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(
    "if (orientation != 0) {\n" +
      "        Matrix matrix = new Matrix();\n" +
      "        matrix.postRotate(orientation);\n" +
      "        exif.resetOrientation();\n" +
      "        return transform(bitmap, matrix);\n" +
      "      } else {",
    " if (orientation != 0) {\n" +
      "      Matrix matrix = new Matrix();\n" +
      "      matrix.postRotate(orientation);\n" +
      "      return transform(bitmap, matrix);\n" +
      "  } else {",
  );

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

ionitron-bot · 2022-11-10T22:08:17Z

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.

jcesarmobile added the needs reply needs reply from the user label Jan 16, 2020

jcesarmobile added bug platform: android priority: low and removed needs reply needs reply from the user labels Jan 21, 2020

Ionitron added platform: electron platform: ios platform: web labels Apr 19, 2021

jcesarmobile closed this as completed May 24, 2021

This was referenced Jul 31, 2021

fix(camera): Reset exif orientation if corrected ionic-team/capacitor-plugins#510

Merged

Camera Plugin - android - FileNotFoundException when using source: CameraSource.Photos ionic-team/capacitor-plugins#524

Closed

ionitron-bot bot locked and limited conversation to collaborators Nov 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: Camera cannot select picture from Redmi Gallery app #2060

bug: Camera cannot select picture from Redmi Gallery app #2060

jirifranc commented Oct 16, 2019 •

edited

Loading

wanaideed commented Nov 5, 2019

alifrontend499 commented Nov 6, 2019

jirifranc commented Nov 6, 2019 •

edited

Loading

jcesarmobile commented Jan 16, 2020

jirifranc commented Jan 21, 2020

lucasrleandro commented Jan 22, 2020

tato469 commented Mar 3, 2020

nikosdouvlis commented May 27, 2020

HamoudaAmine commented Jul 15, 2020

shahidmau commented Jul 23, 2020

shahidmau commented Jul 23, 2020

ferdiaddawy commented Aug 8, 2020

manel00 commented Aug 20, 2020 •

edited

Loading

aren1989 commented Sep 3, 2020

DoveAz commented Sep 10, 2020

lucasrleandro commented Oct 27, 2020

MilotH2 commented Mar 3, 2021

koczka commented Apr 15, 2021

jirifranc commented Apr 19, 2021 •

edited

Loading

balazsotakomaiya commented May 13, 2021

jcesarmobile commented May 24, 2021

czabaj commented Jul 14, 2021 •

edited

Loading

AdlerJS commented Jul 19, 2021

mattmilan-dev commented Jul 30, 2021 •

edited

Loading

jonmbennett commented Jul 31, 2021 •

edited

Loading

stevebrowndotco commented Aug 9, 2021 •

edited

Loading

Euxiniar commented Aug 13, 2021

mendo96 commented Aug 13, 2021

AlexJurik commented Nov 23, 2021 •

edited

Loading

ionitron-bot bot commented Nov 10, 2022

bug: Camera cannot select picture from Redmi Gallery app #2060

bug: Camera cannot select picture from Redmi Gallery app #2060

Comments

jirifranc commented Oct 16, 2019 • edited Loading

Bug Report

Capacitor Version

Affected Platform(s)

Current Behavior

Expected Behavior

Sample Code or Sample Application Repo

Reproduction Steps

Other Technical Details

Other Information

wanaideed commented Nov 5, 2019

alifrontend499 commented Nov 6, 2019

jirifranc commented Nov 6, 2019 • edited Loading

jcesarmobile commented Jan 16, 2020

jirifranc commented Jan 21, 2020

lucasrleandro commented Jan 22, 2020

tato469 commented Mar 3, 2020

nikosdouvlis commented May 27, 2020

HamoudaAmine commented Jul 15, 2020

shahidmau commented Jul 23, 2020

shahidmau commented Jul 23, 2020

ferdiaddawy commented Aug 8, 2020

manel00 commented Aug 20, 2020 • edited Loading

aren1989 commented Sep 3, 2020

DoveAz commented Sep 10, 2020

lucasrleandro commented Oct 27, 2020

MilotH2 commented Mar 3, 2021

koczka commented Apr 15, 2021

jirifranc commented Apr 19, 2021 • edited Loading

balazsotakomaiya commented May 13, 2021

jcesarmobile commented May 24, 2021

czabaj commented Jul 14, 2021 • edited Loading

Solution

Further investigation

Additional informations

AdlerJS commented Jul 19, 2021

mattmilan-dev commented Jul 30, 2021 • edited Loading

jonmbennett commented Jul 31, 2021 • edited Loading

stevebrowndotco commented Aug 9, 2021 • edited Loading

Euxiniar commented Aug 13, 2021

mendo96 commented Aug 13, 2021

AlexJurik commented Nov 23, 2021 • edited Loading

ionitron-bot bot commented Nov 10, 2022

jirifranc commented Oct 16, 2019 •

edited

Loading

jirifranc commented Nov 6, 2019 •

edited

Loading

manel00 commented Aug 20, 2020 •

edited

Loading

jirifranc commented Apr 19, 2021 •

edited

Loading

czabaj commented Jul 14, 2021 •

edited

Loading

mattmilan-dev commented Jul 30, 2021 •

edited

Loading

jonmbennett commented Jul 31, 2021 •

edited

Loading

stevebrowndotco commented Aug 9, 2021 •

edited

Loading

AlexJurik commented Nov 23, 2021 •

edited

Loading