React Native读取CSV文件：解决CSV数据读取、转JSON及上传至Firebase的问题

Hey Kunal, let's tackle this step by step—you've already got the file picker working, so we just need to bridge the gap to reading the CSV content, converting it to JSON, and uploading it to Firebase. Here's a straightforward guide tailored to your React Native setup:

First, you'll need a CSV-to-JSON parser and a way to read the file content from the URI provided by react-native-document-picker. Let's go with csvtojson (lightweight and easy to use) and either react-native-fs (for bare React Native projects) or expo-file-system (for Expo projects).

For bare projects:

npm install csvtojson react-native-fs --save
npx pod-install # Run this for iOS

For Expo projects:

npx expo install csvtojson expo-file-system

Here's the complete code flow to pick the file, read its content, and convert it to JSON:

Option 1: Bare React Native (using react-native-fs) #

import DocumentPicker from 'react-native-document-picker';
import RNFS from 'react-native-fs';
import csv from 'csvtojson';

const pickAndParseCSV = async () => {
  try {
    // Pick the CSV file
    const selectedFile = await DocumentPicker.pick({
      type: [DocumentPicker.types.csv],
    });

    // Read the file content as UTF-8 text
    const csvContent = await RNFS.readFile(selectedFile.uri, 'utf8');

    // Convert CSV to JSON
    const studentData = await csv().fromString(csvContent);

    console.log('Parsed Student Data:', studentData);
    // Now you're ready to upload this JSON to Firebase
  } catch (error) {
    if (DocumentPicker.isCancel(error)) {
      console.log('User cancelled the file picker');
    } else {
      console.error('Error handling CSV file:', error);
    }
  }
};

Option 2: Expo (using expo-file-system) #

import DocumentPicker from 'react-native-document-picker';
import * as FileSystem from 'expo-file-system';
import csv from 'csvtojson';

const pickAndParseCSV = async () => {
  try {
    const selectedFile = await DocumentPicker.pick({
      type: [DocumentPicker.types.csv],
    });

    // Read file content with Expo's file system API
    const csvContent = await FileSystem.readAsStringAsync(selectedFile.uri);

    // Convert CSV to JSON
    const studentData = await csv().fromString(csvContent);

    console.log('Parsed Student Data:', studentData);
  } catch (error) {
    if (DocumentPicker.isCancel(error)) {
      console.log('User cancelled');
    } else {
      console.error('Error:', error);
    }
  }
};

Alternative: Using PapaParse #

If you prefer a more feature-rich parser, PapaParse is another great option. Install it first:

npm install papaparse --save

Then adjust the parsing step:

import Papa from 'papaparse';

// After reading csvContent:
const parsedResult = Papa.parse(csvContent, {
  header: true, // Treats the first row as column headers (keys in JSON)
  skipEmptyLines: true, // Skips any blank lines in the CSV
});

const studentData = parsedResult.data;
console.log('Parsed Data:', studentData);

Once you have the student data as a JSON array, uploading to Firebase Firestore is straightforward. Here's how to do batch uploads (efficient for multiple records):

import { getFirestore, collection, doc, writeBatch } from 'firebase/firestore';

// Initialize Firestore (make sure your Firebase config is set up already)
const db = getFirestore();

const uploadStudentsToFirebase = async (studentData) => {
  try {
    const batch = writeBatch(db);
    const studentsCollection = collection(db, 'students');

    // Add each student record to the batch
    studentData.forEach(student => {
      const newStudentDoc = doc(studentsCollection);
      batch.set(newStudentDoc, student);
    });

    // Commit the batch upload
    await batch.commit();
    console.log('All student records uploaded successfully!');
  } catch (error) {
    console.error('Error uploading to Firebase:', error);
  }
};

// Call this function after parsing the CSV:
// uploadStudentsToFirebase(studentData);

• File Permissions: For iOS, add NSDocumentFolderUsageDescription to your Info.plist to explain why you need file access. For Android (pre-13), add <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> to AndroidManifest.xml.
• Large Files: If your CSV has thousands of records, consider splitting the upload into smaller batches to avoid memory issues.
• CSV Format: Ensure your CSV has a header row (like id,name,email,major) so the parser can map values to meaningful keys in JSON.

内容的提问来源于stack exchange，提问作者Kunal Kumar