Whenever we pick up a document on an Android device from the document picker, it returns us a URI something like content:///

Where is the content provider authority of the selected file and is the file path relative to the content provider’s root directory.
Which is not a valid link if you use it to send over the API, for example, when you are uploading a file on Firebase Storage.

To overcome this problem, we can use the copyTo: ‘documentDirectory’ option in the DocumentPicker. It will copy the selected file into the app’s document directory and return a URI pointing to the copied file in the document directory.

Here is how to achieve this:

let documents = await DocumentPicker.pickMultiple({
        type: DocumentPicker.types.allFiles, //You can mention all the file types required here
        copyTo: 'documentDirectory',
      });

documents = documents.map(doc => ({
        ...item,
        fileCopyUri: `file://${decodeURIComponent(doc.fileCopyUri)}`,
      }));

Using the above code snippet, the URI which gets returned will look something like

file://<path>

Where will be the path of the copied file in your app’s document directory.

The fileCopyUri property is created by appending `file://` before the copied file uri so it can have a format like

file://<path>

The decodeURIComponent function will decode any URI-encoded characters in the URI such as spaces or non-ASCII characters.

For More Information: React Native Document Picker

Need Help With React Native Development?

Work with our skilled React Native developers to accelerate your project and boost its performance.

Hire React Native Developers

Support On Demand!

Related Q&A