What is Document Picker –

In this article, I am going to discuss “How to upload single or multiple documents in react-native”, by using a document picker you can upload any type of file, maybe it from the gallery, pdf, video, audio, etc. below is an example of how we use the react-native-document-picker in react native.

Output Example –

Why We Need Document Picker –

By using react-native-document-picker you able to do the following, with this single plugin.

• Multiple documents
• Single document
• Upload video
• Audio Upload
• Upload pdf
• Upload images

and some of other file as well.

Step 1 – Creating a react-native app

First we create a react-native app for implementing document picker.

react-native init DocumentExample

Step 2 – Installing the document picker plugin

Now we need to install the npm plugin for document picker.

npm install react-native-document-picker

Step 3 – Import the plugin

import the plugin where you want to integrate the document picker.

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

Step 4 – Design the document picker view

Now we design the document picker view within the render method by using this view you will able to pick the document by clicking the upload button.

render(){
 return(
              <View
                  style={{
                      width: "30%",
                      top: moderateScale(8),
                      justifyContent: "center",
                      borderRadius: moderateScale(10),
                    }}
                  >
                    <TouchableOpacity
                      onPress={() =>this.docPicker()}
                      style={styles.uploadView}
                    >
                      <Image
                        source={images.upload}
                        style={styles.documentStatusImg}
                      />
                    <Text style={styles.uploadTxt}> {'upload  doc'}</Text>
                    </TouchableOpacity>
                  </View>
 )
}

Step 5 – Define the method docPicker

Now we are going to provide the definition of docPicker, in this method we define the document picker where you pick the media from the phone.

How to Pick a Single document or File –

  async docPicker() {
    // Pick a single file
    try {
      const res = await DocumentPicker.pick({
       //by using allFiles type, you will able to pick any type of media from user device, 
    //There can me more options as well
    //DocumentPicker.types.images: All image types
    //DocumentPicker.types.plainText: Plain text files
    //DocumentPicker.types.audio: All audio types
   //DocumentPicker.types.pdf: PDF documents
   //DocumentPicker.types.zip: Zip files
   //DocumentPicker.types.csv: Csv files
   //DocumentPicker.types.doc: doc files
   //DocumentPicker.types.docx: docx files
  //DocumentPicker.types.ppt: ppt files
  //DocumentPicker.types.pptx: pptx files
  //DocumentPicker.types.xls: xls files
  //DocumentPicker.types.xlsx: xlsx files
  //For selecting more more than one options use the 
 //type: [DocumentPicker.types.csv,DocumentPicker.types.xls]
         type: [DocumentPicker.types.allFiles],
      });
      console.log(
        res.uri,
        res.type, // mime type
        res.name,
        res.size
      );
      this.uploadAPICall(res);//here you can call your API and send the data to that API
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        console.log("error -----", err);
      } else {
        throw err;
      }
    }
  }

How to Pick Multiple documents or Files –

async docPicker() {
   async docPicker() {
    // Pick a multiple file
    try {
      const res = await DocumentPicker.pickMultiple({
       //by using allFiles type, you will able to pick any   type of media from user device, 
    //There can me more options as well
    //DocumentPicker.types.images: All image types
    //DocumentPicker.types.plainText: Plain text files
    //DocumentPicker.types.audio: All audio types
   //DocumentPicker.types.pdf: PDF documents
   //DocumentPicker.types.zip: Zip files
   //DocumentPicker.types.csv: Csv files
   //DocumentPicker.types.doc: doc files
   //DocumentPicker.types.docx: docx files
  //DocumentPicker.types.ppt: ppt files
  //DocumentPicker.types.pptx: pptx files
  //DocumentPicker.types.xls: xls files
  //DocumentPicker.types.xlsx: xlsx files
  //For selecting more more than one options use the 
 //type: [DocumentPicker.types.csv,DocumentPicker.types.xls]
         type: [DocumentPicker.types.allFiles],
      });
      console.log(
        JSON.stringify(res)
        res.uri,
        res.type, // mime type
        res.name,
        res.size
      );
      this.uploadAPICall(res);//here you can call your API and send the data to that API
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        console.log("error -----", err);
      } else {
        throw err;
      }
    }
  }
}

Setup the App in iOS –

To set up the document picker plugin in iOS what you all need to run the following pod command to set up the third party in iOS.

cd ios && pod install

Permission Needed for android –

for accessing the users internal device you first need to ask the permission, so add the following lines in your AndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Run the React Native App –

Open the terminal and jump into your project path then run the following command.

react-native run-android // for android
or
react-native run-ios // for iOS

So we completed the react-native document picker with single and multiple file upload options which is “How to upload single or multiple documents in react-native“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.