FileUpload in ReactNative

To implement a file upload option in a React Native mobile application with a maximum 5 MB limit, you can use the react-native-document-picker library to allow users to select files from their device.

Additionally, you can use the react-native-fs library to check the file size before uploading it.

Here’s a step-by-step guide:

npm install react-native-document-picker react-native-fs

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

const FileUploadComponent = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const pickDocument = async () => {
    try {
      const result = await DocumentPicker.pick({
        type: [DocumentPicker.types.allFiles],
      });
      // Check if the selected file is within the 5 MB limit
      const fileSize = await RNFS.stat(result.uri);
      const maxSize = 5 * 1024 * 1024; // 5 MB in bytes
      if (fileSize.size > maxSize) {
        Alert.alert('File Size Limit Exceeded', 'Please select a file up to 5 MB.');
      } else {
        setSelectedFile(result);
      }
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        // User cancelled the document picker
      } else {
        throw err;
      }
    }
  };
  const uploadFile = () => {
    // Implement your file upload logic here
    if (selectedFile) {
      // You can use the selectedFile.uri to get the file path for upload
      Alert.alert('File Uploaded', `File ${selectedFile.name} has been uploaded successfully.`);
    } else {
      Alert.alert('No File Selected', 'Please select a file to upload.');
    }
  };
  return (
    <View>
      <Button title="Pick Document" onPress={pickDocument} />
      {selectedFile && <Text>Selected File: {selectedFile.name}</Text>}
      <Button title="Upload File" onPress={uploadFile} />
    </View>
  );
};
export default FileUploadComponent;

In this example, the “Pick Document” button uses react-native-document-picker to allow the user to select a file.

The selected file’s size is then checked using react-native-fs, and if it's within the 5 MB limit, the file is considered valid for upload.

Thank you for reading this article! Don’t forget to clap.

If you have any queries related to ReactNative, I’m always happy to help you. You can reach me on LinkedIn and Gmail.