Error: User cancelled image selection

[umair-dpl]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.35.1
• react-native v0.61.5

Platform

Tell us to which platform this issue is related

• Android

Expected behaviour

on a camera screen we have a button of upload, press the upload button opens the ImagePicker.openPicker, select nothing and go back Error User cancelled image selection along with the the camera capture button doesn't take any picture, camera capture function is called but does not allow the image to preview because of Error User cancelled image selection

Actual behaviour

on a camera screen if we navigate to gallery then coming back without even selecting anything the camera function should work which is working if clicked but the screen should change to preview which doesn't change. All I see is the camera still on which shouldn't be on.

Fixes already tried

1. await ImagePicker.openPicker({}).then({}).catch((err)->{console.log(err)})

2. try{whateverintheFunction }catch(err){console.log(err)}

3. changes in android.manfest.xml file under activity section android:launchMode="singleTop"

none of these solution works, kindly suggest me something TIA

[kutaisan]

Used like this and works like charm;

try { const image = await ImagePicker.openCropper({ path: uri, height: 385, width: 1000, }); } catch(error){ console.log("Error:", error); }

[umair-dpl]

@kutaisan i am implementing it if it occurs again what is the fix then ?

[paruckerr]

inside catch(error)...

if (error.code === 'E_PICKER_CANCELLED') {
  return false;
}

[RockDevelopr]

Same problem here. I tried all suggestions with no success. Note: the problem occurs only in Android devices.

[ArchanaNair]

Getting similar issue on Andriod device. I am not getting any callback response, instead it is going to catch block. Please help to resolve this issue. My Android device version is 11 and using Redmi let img = await ImagePicker.openPicker({ width: 200, height: 200, compressImageMaxHeight: 400, compressImageMaxWidth: 400, includeBase64: true, multiple: true, mediaType: 'photo' }) img.then(images => { console.log( images) }).catch(error =>{ console.log("error in catch block", error.code) if (error.code === 'E_PICKER_CANCELLED') { return false; } })

[noumantahir]

Facing same issues, happening on android device, emulator with Android 10 and 11 also working good, iOS is working fine...

In my case if I select an image using image picker and response is always User cancelled image selection

Snippet:

  _handleOpenImagePicker = () => {
    ImagePicker.openPicker({
      includeBase64: true
    })
      .then((images) => {
        this._handleMediaOnSelected(images);
      })
      .catch((e) => {
       //Always ends up here even on image selection
        this._handleMediaOnSelectFailure(e);
      });
  };

Device: Mi Redmi Note 10 Android 11

[sagar-vasu]

Facing same issues, happening on android device, emulator with Android 10 and 11 also working good, iOS is working fine...

Device: Mi Redmi Note 10 Android 11

ImagePicker.openPicker({ mirrorImage: true, compressImageQuality: 0.5, forceJpg: true, writeTempFile: false, includeBase64: true, }) .then(image => { alert(image); let ImageUri = Platform.OS === 'ios' ? image.sourceURL : image.path; setImage(ImageUri); }) .catch(er => { alert(er); if (er.code === 'E_PICKER_CANCELLED') { // here the solution return false; } });

[ankitsingh3271]

Facing same issues, happening on android device, emulator with Android 10 and 11 also working good, iOS is working fine...

Device: Mi Redmi Note 10 Android 11

ImagePicker.openPicker({ mirrorImage: true, compressImageQuality: 0.5, forceJpg: true, writeTempFile: false, includeBase64: true, }) .then(image => { alert(image); let ImageUri = Platform.OS === 'ios' ? image.sourceURL : image.path; setImage(ImageUri); }) .catch(er => { alert(er); if (er.code === 'E_PICKER_CANCELLED') { // here the solution return false; } });

This solution is working fine

[ankitjaiswal1994]

inside catch(error)...

if (error.code === 'E_PICKER_CANCELLED') {
  return false;
}

I dont know how it serves the purpose.. like what should we do after catching this error ?

[b3ni]

Same error

[ankitjaiswal1994]

@b3ni downgrading version to 0.35.3 worked for me. Not an ideal solution although.

[adhip94]

Yes, even i am facing the same issue on Android - Redmi. I try to select an image/video using ImagePicker.openPicker and it always goes to the catch block... Any alternatives for this?

[ErkanGorgulu]

I am having the same issue with my Xiaomi - Note 8 Pro. I choose an image from the gallery and it goes to catch with user canceled error. Downgrading to 0.35.3 didn't work. Taking images with camera works fine.

[mehtishamulhaq]

Facing the same issue on Redmi note 9. Is there any update regarding this ?

[ghost]

Facing with the same issue Xiaomi M2012K11AI (Xiaomi Mi 11X), Android 11 (OS Level 30)

[ghost]

I think it is not an issue of react-native-image-crop-picker, you can fix it just:

Just go to Settings -> Additional Settings -> Developer Option -> Turn on MIUI optimization (enable it)
Note - If not see the option "Turn on MIUI optimization" then click "Reset to default values" 4-5 times. It will enable the option.

If it not helps, try this:

this problem solved after i change android:launchMode="singleInstance" to singleTop 
in activity tag at androidManifest file but however i really dont know 
what are the differences between this two lunchMode in reactNative!!

[areebshakeel]

Facing same issues on Google Pixel 3 Android 12 ImagePicker.openPicker({ mediaType: 'photo', forceJpg: true, multiple: false, }) .then(image => { alert(image); setImage(ImageUri); }) .catch(er => { alert(er);

});

[Pavanpuli89]

I think it is not an issue of react-native-image-crop-picker, you can fix it just:

Just go to Settings -> Additional Settings -> Developer Option -> Turn on MIUI optimization (enable it)
Note - If not see the option "Turn on MIUI optimization" then click "Reset to default values" 4-5 times. It will enable the option.

If it not helps, try this:

this problem solved after i change android:launchMode="singleInstance" to singleTop 
in activity tag at androidManifest file but however i really dont know 
what are the differences between this two lunchMode in reactNative!!

This solution is working for MI mobile but facing the same issue in the google pixel 6 pro

[arlovip]

The same issue on XiaoMi 12 Pro Android 13. I have already granted all permissions but it still returns

{
    "nativeStackAndroid": [],
    "userInfo": null,
    "message": "User cancelled image selection",
    "code": "E_PICKER_CANCELLED"
}

How to fix this?

[Pavanpuli89]

 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"  />
 <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
 <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

Adding these three lines in the androidmanifest.xml solved my issue.

[arlovip]

The same issue on XiaoMi 12 Pro Android 13. I have already granted all permissions but it still returns

{
    "nativeStackAndroid": [],
    "userInfo": null,
    "message": "User cancelled image selection",
    "code": "E_PICKER_CANCELLED"
}

How to fix this?

Sorry for this. This issue happens because I call `` when I call ImagePicker.openPicker at the same time I call await request(PERMISSIONS.ANDROID.READ_MEDIA_IMAGES) as follows

const checkResult = await check(PERMISSIONS.ANDROID.READ_MEDIA_IMAGES);
if (checkResult === RESULTS.GRANTED) {
ImagePicker.openPicker.... // here I forgot to add "return".
}
const requestResult = await request(PERMISSIONS.ANDROID.READ_MEDIA_IMAGES);

OOPS! I made a rookie mistake... the fact that this issue has nothing to do with this repo.