React Native File Picker | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

For picking a file or a document, a library called react-native-document-picker can be used

It provides DocumentPicker component which allows to pick document

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named FilePickerApp)

react-native init FilePickerApp

This creates a directory named FilePickerApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

How to Use

react-native-document-picker library provides a DocumentPicker component with ability tochoose single or multiple files according to file type list passed as argument

//To pick single document or file
const res = DocumentPicker.pick({
    type: [DocumentPicker.types.allFiles],
});
//To pick multiple documents or files
const results = DocumentPicker.pickMultiple({
    type: [DocumentPicker.types.images],
});
// other DocumentPicker.types
// DocumentPicker.types.images
// DocumentPicker.types.plainText
// DocumentPicker.types.audio
// DocumentPicker.types.pdf

Dependency

Go to project directory (here FilePickerApp)

cd FilePickerApp

Add react-native-document-picker to current project using yarn

yarn add react-native-document-picker

or using npm

npm install react-native-document-picker --save

iOS

After yarn add command, cd into ios folder inside project directory and usepod command to install any required CocoaPods dependencies:

cd ios && pod install && cd ..

Permission

Requesting permission to access external storage in Android

For Android applications, READ_EXTERNAL_STORAGE permission has to be added in AndroidManifest.xml file

Find and open FilePickerApp (project directory) → android → app → src → main → AndroidManifest.xml

Add below permission (before <application tag , inside <manifest element )

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

App Code

Following sample code implements DocumentPicker.pick() and DocumentPicker.pickMultiple() methods

App.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  TouchableOpacity,
  ScrollView,
  Image,
} from 'react-native';
import DocumentPicker from 'react-native-document-picker';


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      singleFile: '',
      fileList: [],
    };
  }

  async selectOneFile() {
    try {
      const res = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      console.log('selectOneFile() : ' + JSON.stringify(res));
      this.setState({ singleFile: res });
    }
    catch (err) {
      //If user cancels document selection
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled from single doc picker');
      }
      else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  }

  async selectfileList() {
    try {
      const results = await DocumentPicker.pickMultiple({
        type: [DocumentPicker.types.images],
      });
      for (const res of results) {
        console.log('selectfileList() : ' + JSON.stringify(res));
      }
      this.setState({ fileList: results });
    }
    catch (err) {
      if (DocumentPicker.isCancel(err)) {
        alert('Canceled from multiple doc picker');
      }
      else {
        alert('Unknown Error: ' + JSON.stringify(err));
        throw err;
      }
    }
  }

  getFileText(item) {
    return (
      <Text style={styles.text}>
        File Name: {item.name ? item.name : ''}
        {'\n'}
        Type: {item.type ? item.type : ''}
        {'\n'}
        File Size: {item.size ? item.size : ''}
        {'\n'}
        URI: {item.uri ? item.uri : ''}
        {'\n'}
      </Text>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          activeOpacity={0.9}
          style={styles.button}
          onPress={this.selectOneFile.bind(this)}>
          <Text style={{ marginRight: 10, fontSize: 19, color: 'white' }}> Pick one file </Text>
          <Image
            source={{
              uri: 'https://img.icons8.com/offices/40/000000/attach.png',
            }}
            style={styles.imageIcon}
          />
        </TouchableOpacity>
        {this.getFileText(this.state.singleFile)}
        <View style={{ backgroundColor: 'grey', height: 2, margin: 10 }} />
        <TouchableOpacity
          activeOpacity={0.5}
          style={styles.button}
          onPress={this.selectfileList.bind(this)}>
          <Text style={{ marginRight: 10, fontSize: 19, color: 'white' }}> Pick multiple images </Text>
          <Image
            source={{
              uri: 'https://img.icons8.com/offices/40/000000/attach.png',
            }}
            style={styles.imageIcon}
          />
        </TouchableOpacity>
        <ScrollView>
          {this.state.fileList.map((item, key) => (
            <View key={key}>
              {this.getFileText(item)}
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  text: {
    backgroundColor: '#fff',
    fontSize: 15,
    marginTop: 16,
    color: 'black',
  },
  button: {
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#fd2ded',
    padding: 5,
  },
  imageIcon: {
    height: 20,
    width: 20,
    resizeMode: 'stretch'
  },
});

Run instructions

Running in Android

cd into project directory (here FilePickerApp)

cd FilePickerApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android

Running in ios

cd into project directory (here FilePickerApp)

cd FilePickerApp

Enter following command :

react-native run-ios

This might take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work

File Picker in React Native