Implementing File Upload with react-native-document-picker in React Native

Hello, React Native enthusiasts! In this tutorial, we’ll walk through the seamless integration of file uploads in your React Native application using react-native-document-picker.

For this, we do not need to get permission from the user. we can directly access the gallery.

Getting Started

Before we delve into the implementation, let’s introduce two essential NPM packages: react-native-document-picker and react-native-fs.

react-native-document-picker

This package simplifies the process of picking files, documents, or images from your gallery.

Installation:

npm install react-native-document-picker

Usage:

import DocumentPicker from 'react-native-document-picker';

const pickedFile = await DocumentPicker.pickSingle({
  type: [DocumentPicker.types.allFiles],
});

Response:

{
    "size": 367255,
    "fileCopyUri": null,
    "name": "pexels-szabó-viktor-3227986.jpg",
    "type": "image/jpeg",
    "uri": "content://com.android.providers.downloads.documents/document/raw%3A%2Fstorage%2Femulated%2F0%2FDownload%2Fpexels-szab%C3%B3-viktor-3227986.jpg"
}

After taking the response need to store those files in AWS S3 bucker or some other cloud. so we need to convert this URI into base64 format.

react-native-fs

This package facilitates the conversion of any file URI into base64 format.

import RNFS from ‘react-native-fs’;

import RNFS from 'react-native-fs';

await RNFS.readFile(pickedFile.uri, 'base64').then(data => {
  console.log('base64', data);
});

Implementation in Your React Native App

Now, let’s integrate file uploads into your React Native app using these packages:

import React from 'react';
import { View ,Button} from 'react-native';
import {launchCamera} from 'react-native-image-picker';
import DocumentPicker from 'react-native-document-picker';
import RNFS from 'react-native-fs';

const App = () => {

  const handleCameraLaunch = async (isCamera: boolean) => {
    const options = {
      mediaType: isCamera ? 'photo' : 'video',
    };

    try {
      const response = await launchCamera(options);
      console.log('pickedFile',response);
    } catch (error) {
      console.error('Error:', error);
    }
  };
  const uploadFileOnPressHandler = async () => {
    try {
      const pickedFile = await DocumentPicker.pickSingle({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('pickedFile',pickedFile);
      
      await RNFS.readFile(pickedFile.uri, 'base64').then(data => {
        console.log('base64',data);
      });
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        console.log(err);
      } else {
        console.log(error);
        throw err;
      }
    }
  };

  return (
    <View style={{ flex: 1 }}>
       <Button title="Camera" onPress={async () => {
              handleCameraLaunch(true);
          }} />
       <Button title="Video" onPress={async () => {
              handleCameraLaunch(false);
          }} />
          <Button title="Gallary" onPress={async () => {
              uploadFileOnPressHandler();
          }} />
    </View>
  );
};

export default App;

Feel free to explore the additional functionalities and make your React Native app even more versatile. If you want to learn more about using the camera and video features, check out the previous blog post.

Happy coding!

🔗 Reference Links:

https://youtu.be/PUj__YIvkQg?si=kTE8F-Jrxljwbh0_

Implementing Camera with react-native-image-picker in React Native