Estoy tratando de obtener un archivo de imagen como texto en uno de mis proyectos JS con react. Estoy usando el paquete "material-ui-dropzone" para hacer la interfaz de usuario. Cuando el usuario arrastra y suelta un archivo válido, debe hacer clic en el botón de inicio. Puedo obtener un objeto de archivo en la función handleSave. Paso este lector de archivos de objetos de archivo y luego lo leo como readAsText. Pero cuando verifique el objeto readAsText (myLogo) en la consola, indica que no está definido. ¿Alguien puede ayudarme a girarlo?

Se agrega el enlace codesandbox .

 import React from "react"; import Button from "@material-ui/core/Button"; import { DropzoneDialog } from "material-ui-dropzone"; const initialState = { open: false, files: [] }; // ref: https://github.com/Yuvaleros/material-ui-dropzone export default function DropzoneDialogExample() { const [state, setState] = React.useState(initialState); const handleOpen = () => { setState({ ...state, open: true }); }; const handleClose = () => { setState({ ...state, open: false }); }; const handleSave = (files) => { setState({ ...state, files: files, open: false }); console.log(files.length === 1); console.log(files[0]); const reader = new FileReader(); const myLogo = reader.readAsText(files[0]); console.log(myLogo); }; return ( <div> <Button variant="contained" color="primary" size="small" onClick={handleOpen} > Add Image </Button> <DropzoneDialog open={state.open} onSave={handleSave} acceptedFiles={["image/jpeg", "image/png", "image/bmp"]} showPreviews={false} maxFileSize={5000000} onClose={handleClose} cancelButtonText={"Cancle"} submitButtonText={"Start"} showFileNamesInPreview={true} dialogTitle={"Select the image file to insert"} dropzoneText={"Please Drag and Drop file/s here "} /> </div> ); }