Convert content:// URI to actual path for Android using React-Native

Question

I am trying to upload images from cameraRoll. Thing is the cameraRoll component returns content:// URI rather than an actual file path. For uploading the image I need a file path, is there any way to convert content:// URI to file URI? Thanks

Answer 1

I took the function submitted by @Madhukar Hebbar and made it into a React Native Node Module.

You can find it here: react-native-get-real-path

Thus to achieve what you want, you can use the above module in conjunction with react-native-fs

You can then do something like this when you want to upload the selected image from Camera Roll:

RNGRP.getRealPathFromURI(this.state.selectedImageUri).then(path =>
  RNFS.readFile(path, 'base64').then(imageBase64 =>
    this.props.actions.sendImageAsBase64(imageBase64)
  )
)

Answer 2

You can use react-native-fs's copyFile method to convert content uri to file uri.

if (url.startsWith('content://')) {
    const urlComponents = url.split('/')
    const fileNameAndExtension = urlComponents[urlComponents.length - 1]
    const destPath = `${RNFS.TemporaryDirectoryPath}/${fileNameAndExtension}`
    await RNFS.copyFile(url, destPath)
}

Then you can use 'file://' + destPath as expected

Answer 3

Pass the content:// URI to below method to get the file path as string and then use the file object to do any operation.

File file = new File(getURIPath(uriValue));

/**
 * URI Value
 * @return File Path.
 */
String getURIPath(Uri uriValue) 
    {
        String[] mediaStoreProjection = { MediaStore.Images.Media.DATA };
        Cursor cursor = getContentResolver().query(uriValue, mediaStoreProjection, null, null, null);
        if (cursor != null){ 
        int colIndex = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
        cursor.moveToFirst();
        String colIndexString=cursor.getString(colIndex);
        cursor.close();
        return colIndexString;
        }
        return null;
    }