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