1

I'm new to mobile app development and I'm trying to develop an app using react-native and expo. I want to let the user select a CSV / XLSX file from the internal cell phone's storage and get that data as an array. I'm using "expo-document-picker" to get access to the files, this returns an URI of the document but can't access that way with XLSX or any other "CSV reader" package.

For now I just want to get an array with the data to process it later, something like the result obtained on this web example but in the mobile app: https://oss.sheetjs.com/sheetjs/

If it helps, I'm attaching some code, I guess I can't just put the URI of the file and expect XLSX to read it so that's the part I can't solve yet.

import React from "react";
import { StyleSheet } from "react-native";
import { Button, Input } from "react-native-elements";
import * as MediaLibrary from 'expo-media-library';
import * as DocumentPicker from 'expo-document-picker';
import * as XLSX from "xlsx";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { writeFile, readFile } from "expo-file-system";
import * as FileSystem from "expo-file-system";
import * as CSV from "csvtojson";

export default function Options() {    

    const excelboton = async () => {

        //const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
        const resultPermissions = await MediaLibrary.requestPermissionsAsync();  //Permissions.askAsync(Permissions.CAMERA_ROLL)
        const resultPermissionsData = resultPermissions.status;//resultPermissions.permissions.mediaLibrary.status;

        if (resultPermissionsData === "denied"){
            console.log("Es necesario permitir el acceso a los archivos")
        }
        else {
            const result = await DocumentPicker.getDocumentAsync({
                copyToCacheDirectory:true,
                multiple:false,
              });

            if (result !== "cancel"){
                var workbook = XLSX.read(result.uri, { });    //My attempt to read the document using it's URI and XLSX
                console.log(workbook)
            }
        }        
    };

    return (
        <KeyboardAwareScrollView>
            <Input 
                placeholder="Producto"
                containerStyle={styles.input}
            />
           <Button
                title="EXCEL"
                containerStyle={styles.botoncontainer}
                buttonStyle={styles.boton}
                onPress={excelboton}
            />
        </KeyboardAwareScrollView>
    )
}
csaqu
  • 31
  • 5
  • Please don't put [code as image](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-errors-when-asking-a-question). Also, can you explain more where you are stuck/what's your error ? – Elikill58 Sep 28 '21 at 09:32
  • Sorry for the image. I'm not being able to "read" the csv file, for instance i have read a txt file, extract the text and show it on the console, but when i try to do the same with a csv or xlsx file i just get random symbols like "#@t" so, i'm stuck on transforming the csv data to an array or json – csaqu Sep 28 '21 at 15:23
  • No problem x) Can you [edit](https://stackoverflow.com/editing-help) your question to explain this ? Just, does [this](https://stackoverflow.com/questions/43756014/convert-csv-to-json-client-side-with-react-dropzone) or [this one](https://stackoverflow.com/questions/46448027/in-reactjs-convert-csv-to-json-return-error) answer to your question ? – Elikill58 Sep 28 '21 at 15:27
  • Both examples are working in web apps, i can only get an URI of the document something like: /data/user/0/host.exp.exponent/cache/ExperienceData/%40crs%2Finventario-cs/DocumentPicker/b951d533-a564-4146-a369-9a18dd020eab.xlsx When i try to read that using expo-file-system "readFile" i get: [Unhandled promise rejection: TypeError: (0, _expoFileSystem.readFile) is not a function. (In '(0, _expoFileSystem.readFile)(result.uri, 'ascii')', '(0, _expoFileSystem.readFile)' is undefined)] I guess i should find a way to get a path instead of an uri but i can't find a way to do that – csaqu Oct 23 '21 at 18:09

0 Answers0