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>
)
}