Crashing on Android when selecting a file for cropping

[tss101]

Version

• react-native-image-crop-picker v0.21.2
• react-native v0.57.7

Platform

• Android v9

Expected behaviour

The cropping interface should appear.

It seems to go fine when the image is chosen from the camera, and is only a problem when chosen from the filesystem (specifically the downloads folder).

Actual behaviour

The app crashes before the cropping interface appears

Steps to reproduce

1. Run the crop picker with the following code:

    pickFromFiles: function() {
        var that = this
        ImagePicker.openPicker({
              width: this.props.pickWidth ? this.props.pickWidth :  1000,
              height: this.props.pickHeight ? this.props.pickHeight :   750,
              cropping: true,
              includeBase64: true 
        }).then(image => {
              that.setState({loading: true})
              that.processImage(image)
        }).catch(e => {
            //alert(e);
        });

2. Select a file from the downloads folder

3. App crashes

Attachments

relevant logcat crash report

04-03 23:00:44.100 23755 23755 D BitmapLoadUtils: maxBitmapSize: 2302
04-03 23:00:44.102 23755 23784 D BitmapWorkerTask: Uri scheme: content
04-03 23:00:44.109  9454 16780 E DatabaseUtils: Writing exception to parcel
04-03 23:00:44.109  9454 16780 E DatabaseUtils: java.lang.UnsupportedOperationException: Request header queries do not support projections, select
ions or sorting
04-03 23:00:44.109  9454 16780 E DatabaseUtils:         at com.android.providers.downloads.DownloadProvider.query(DownloadProvider.java:913)
04-03 23:00:44.109  9454 16780 E DatabaseUtils:         at android.content.ContentProvider.query(ContentProvider.java:1074)
04-03 23:00:44.109  9454 16780 E DatabaseUtils:         at android.content.ContentProvider.query(ContentProvider.java:1166)
04-03 23:00:44.109  9454 16780 E DatabaseUtils:         at android.content.ContentProvider$Transport.query(ContentProvider.java:246)
04-03 23:00:44.109  9454 16780 E DatabaseUtils:         at android.content.ContentProviderNative.onTransact(ContentProviderNative.java:102)
04-03 23:00:44.109  9454 16780 E DatabaseUtils:         at android.os.Binder.execTransact(Binder.java:731)
04-03 23:00:44.113   805   805 D SDM     : DisplayBase::BuildLayerStackStats: LayerStack layer_count: 7, app_layer_count: 6, gpu_target_index: 6, 
display type: 0
04-03 23:00:44.114 23755 23784 E AndroidRuntime: FATAL EXCEPTION: AsyncTask #2
04-03 23:00:44.114 23755 23784 E AndroidRuntime: Process: to.synced.synced, PID: 23755
04-03 23:00:44.114 23755 23784 E AndroidRuntime: java.lang.RuntimeException: An error occurred while executing doInBackground()
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.os.AsyncTask$3.done(AsyncTask.java:354)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:383)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at java.util.concurrent.FutureTask.setException(FutureTask.java:252)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at java.util.concurrent.FutureTask.run(FutureTask.java:271)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:245)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at java.lang.Thread.run(Thread.java:764)
04-03 23:00:44.114 23755 23784 E AndroidRuntime: Caused by: java.lang.UnsupportedOperationException: Request header queries do not support project
ions, selections or sorting
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.database.DatabaseUtils.readExceptionFromParcel(DatabaseUtils.java:167)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.database.DatabaseUtils.readExceptionFromParcel(DatabaseUtils.java:135)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.content.ContentProviderProxy.query(ContentProviderNative.java:418)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.content.ContentResolver.query(ContentResolver.java:804)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.content.ContentResolver.query(ContentResolver.java:753)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.content.ContentResolver.query(ContentResolver.java:711)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at com.yalantis.ucrop.util.FileUtils.getDataColumn(FileUtils.java:110)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at com.yalantis.ucrop.util.FileUtils.getPath(FileUtils.java:163)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at com.yalantis.ucrop.task.BitmapLoadTask.getFilePath(BitmapLoadTask.java:194)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at com.yalantis.ucrop.task.BitmapLoadTask.processInputUri(BitmapLoadTask.java:174)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at com.yalantis.ucrop.task.BitmapLoadTask.doInBackground(BitmapLoadTask.java:93)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at com.yalantis.ucrop.task.BitmapLoadTask.doInBackground(BitmapLoadTask.java:44)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at android.os.AsyncTask$2.call(AsyncTask.java:333)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        at java.util.concurrent.FutureTask.run(FutureTask.java:266)
04-03 23:00:44.114 23755 23784 E AndroidRuntime:        ... 4 more

This seems somewhat related to:

https://github.com/ivpusic/react-native-image-crop-picker/issues/600

But the exact error is a little different, and I'm using 'compileSdkVersion 27' and 'com.android.support:appcompat-v7:27.1.1'.

Edit: I managed to narrow down the error, it looks like a path thing:

If I click on the Downloads folder in (first image), and then choose the Downloads link in the menu (third link, second image), and choose an image it will crash. But if I click on Images (top link, second image) and re-choosing the Download folder then it works fine

[damoguyan8844]

I meet same problem, I fixed by change the picker type:

private void initiatePicker(final Activity activity) { try { if (cropping || mediaType.equals("photo")) { final Intent libraryIntent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI); activity.startActivityForResult(libraryIntent, IMAGE_PICKER_REQUEST); return; } final Intent galleryIntent = new Intent(Intent.ACTION_GET_CONTENT); ......

hope it help,

[tss101]

Many thanks @damoguyan8844 that looks to have fixed it for me

[dyza777]

@damoguyan8844 could you please explain where should I put this code?

[tss101]

Hi @dyza777,

I changed the below in my node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java based on @damoguyan8844's instructions:

    private void initiatePicker(final Activity activity) {
        try {

            ////Added this block to replace the commented out block below
            //based on this bug: https://github.com/ivpusic/react-native-image-crop-picker/issues/980
            if (cropping || mediaType.equals("photo")) {
                final Intent libraryIntent = new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                activity.startActivityForResult(libraryIntent, IMAGE_PICKER_REQUEST);
                return;
            }
            ///////////////////
                        
            final Intent galleryIntent = new Intent(Intent.ACTION_GET_CONTENT);

            /////Commented this out, using the block above
            /*
            if (cropping || mediaType.equals("photo")) {
                galleryIntent.setType("image/*");
            } else 
            */  
            if (mediaType.equals("video")) {
                galleryIntent.setType("video/*");
            } else {
                galleryIntent.setType("*/*");
                String[] mimetypes = {"image/*", "video/*"};
                galleryIntent.putExtra(Intent.EXTRA_MIME_TYPES, mimetypes);
            }

            galleryIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            galleryIntent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, multiple);
            galleryIntent.addCategory(Intent.CATEGORY_OPENABLE);

            final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image");
            activity.startActivityForResult(chooserIntent, IMAGE_PICKER_REQUEST);
        } catch (Exception e) {
            resultCollector.notifyProblem(E_FAILED_TO_SHOW_PICKER, e);
        }
    }

[josevsalina]

Same issue here! I follow the instructions of @tss101 but when compiling to android release still the problem!

[akhilsanker]

Hi, Same issue here. If an image of about 11mb is chosen for cropping, the app crashes while cropping. Found in android.

Any solution is appreciable.

Thanks

[msvargas]

Hi i solved using this, please try:

// ============================================================
/**
 * Open image cropper editor
 */
const openCropper = (options) =>
  ImagePicker.openCropper({
    multiple: true,
    forceJpg: true,
    freeStyleCropEnabled: true,
    enableRotationGesture: true,
    includeBase64: true,
    useFrontCamera: false,
    writeTempFile: false,
    includeExif: false,
    cropping: true,
    height: 1280,
    width: 960,
    cropperToolbarTitle: 'Editar Foto',
    loadingLabelText: 'Procesando...',
    cropperChooseText: 'Seleccionar',
    cropperCancelText: 'Cancelar',
    mediaType: 'photo',
    hideBottomControls: false,
    ...options,
  });
//https://github.com/ivpusic/react-native-image-crop-picker/issues/980
const editPhoto = (imageIndex: number) => {
  try {
    const tempImagePath = utils.FilePath.TEMP_DIRECTORY + '/itm-photo-cropper.jpg'; // utils.FilePath it from react-native-firebase you can use another as rn-fetch-blob or react-native-fs
    const { uri, width, height } = fieldsRef.current[FIELDS.PHOTOS]?.ref.value[imageIndex] as ITMFormPhoto; // ignore this only need a image with this output
    const imageBase64 = uri as string;
    // in this case I have image base64 so i save first as file, ignore this if you already image file
    return fs.writeFile(tempImagePath, imageBase64.substr(imageBase64.indexOf(',') + 1), 'base64').then(() =>
      openCropper({
        path: (Platform.OS === 'android' ? 'file://' : '') + tempImagePath, // <- check this line avoid crash in android
        height,
        width,
        compressImageQuality: 1,
      }).then((image) => {
        console.log(image);
      }),
    );
  } catch (error) {
    console.log(error);
  }
};

[lucksp]

adding path: (Platform.OS === 'android' ? 'file://' : '') + photoPath, like above solved problem on android... wonder what the root cause is?