Bad fileName on Android Picked Video [🐛]

[jfries289]

Description

When using launchImageLibrary on Android and picking a video, the fileName comes back with the content URI, in the form content://com.android.providers.media.documents/document/video:1752 rather than an actual path/file name. This is of course unusable and throws an error when we try to save the file.

Picking a video on iOS works fine. Taking a new video on both iOS and Android works fine.

I am far from a Java expert, but it looks like the video file is being delivered by the Document Provider, but there doesn't seem to be a data column when I attempt Cursor cursor = activity.getContentResolver().query(contentURI, null, null, null, null);

How to repeat issue and example

On Android (version 12), launch picker with mediaType mixed or video. Select a video. ImagePickerResponse comes back as:

{
  "assets": [
    {
      "height":1920,
      "width":1080,
      "type":"video/mp4",
      "duration":11,
      "fileName":"video:1744",
      "bitrate":21581279,
      "fileSize":30545603,
      "uri":"content://com.android.providers.media.documents/document/video%3A1744"
    }
]}

Our code calling launchImageLibrary:

launchImageLibrary(
  {
    mediaType: "mixed",
    includeBase64: false,
    selectionLimit: 0,
  },
  onMediaSelected,
)

Solution

Need the real file path for videos.

Additional Information

• Image Picker version: 4.7.3
• React Native version: 0.63
• Platform: Android 12
• Development Operating System: MacOS
• Dev tools: Android Studio Arctic Fox | 2020.3.1 Patch 3

[pdaus1405]

Same for Fotos

There is a temp file name like:

rn_image_picker_lib_temp_f256df93-45cf-422f-9441-f0a939e31aa2.jpg

[pierroo]

Facing the same issue, did you come up with a solution since @jfries289 ? That would be very helpful :)

[jfries289]

Facing the same issue, did you come up with a solution since @jfries289 ? That would be very helpful :)

I had to switch to react-native-image-crop-picker

[simonNeo]

try copy your file to sandbox after selecting file with react-native-fs. may like this:

import RNFS from 'react-native-fs';
const result = await launchImageLibrary(yourOptions);
const file = result.assets[0];
const newFileName = getFileName(file); // generate file name by file.type or anything you like
const realPath = `${RNFS.TemporaryDirectoryPath}/${newFileName}`;
await RNFS.copyFile(file.uri, destPath);
await RNFS.stat(destPath);
console.log(realPath); // the copied file path

[alex-mironov]

@simonNeo questions about this line

const newFileName = getFileName(file); // generate file name by file.type or anything you like

I'm not sure if it's me being stupid, but I'd like to get an original file name, is there a way to achieve this with react-native-fs?

[simonNeo]

@simonNeo questions about this line

const newFileName = getFileName(file); // generate file name by file.type or anything you like

I'm not sure if it's me being stupid, but I'd like to get an original file name, is there a way to achieve this with react-native-fs?

sorry, I'm not sure how to get original file name. In some case, It seems that selected file with react-native-image-picker is a reference of original file, which has fake file name. so I don't trust in file.name that react-native-image-picker provided.