How do I read file with content-URI in React Native on Android?

Question

I'm using React Native (0.48.3) for Android development. It seems, I'm stuck with a really trivial task: select a file and read it's content as a string. I have react-native-document-picker v2.0.0 for file selection, and it works fine: I can choose file and get it's URI. The problem is, I cannot make any package to read file with this link. I've already tried react-native-filesystem and react-native-fs, but it seems, they can work only with files in application directory. Anyway I get an error like this:

Error: File was not found: content://com.android.providers.downloads.documents/document/7

What package or function I need to use?

UPD: retrieving real, not content:// path, with react-native-get-real-path makes things work. But is this conversion really necessary, can one use content:// path for loading files?

score 5 · Answer 1 · answered Jul 01 '20 at 13:03

5

Say you are using react-native-fs, using copyFile can convert content uri to file uri.

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

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

answered Jul 01 '20 at 13:03

fujianjin6471

5,168
1
36
32

what a precious answer! – Yusuf Sep 12 '20 at 11:21
1

What is urlComponents? – FabioDev Feb 17 '22 at 20:11
you have to replace % characters const destPath = `${RNFS.TemporaryDirectoryPath}/${fileNameAndExtension}`.replace(/%/g, "") – cagri Oct 12 '22 at 14:39

score 2 · Answer 2 · answered Mar 29 '19 at 19:00

There is already merged pull request #395 in react-native-fs which added a possibility to read from URI starting with content:// directly. I'm using Android URI in this code without any problem:

DocumentPicker.show({ filetype: ['*/*'] }, async (error, res) => {
  ...
  const exportedFileContent = await fs.readFile(res.uri, 'base64')
  ...
})

score 0 · Answer 3 · answered Dec 02 '18 at 03:07

0

On Android devices, you will need to append "file://" to load any file. You can do this using the package you mentioned or just manually. If you append it manually, react-native-fs can then be used to read the URI.

answered Dec 02 '18 at 03:07

Nerdragen

2,976
2
11
22

score 0 · Answer 4 · answered Mar 22 '23 at 10:26

This is 2023 and incase anybody still needs help, you can try the package react-native-blob-util

I faced the issue when I used react-native-document-picker to select files. What helped me was using the RNBU.fs.readStream() function. I first used it to convert to base64 then used react-native-fs to save the file to my device directory with the RNFS.writeFile() function. React Native Blob util I hope this helps!

How do I read file with content-URI in React Native on Android?

4 Answers4