I am trying to get image file as text in one of my JS projects with react. I am using “material-ui-dropzone” package to do user interface. When user drag and drop valid file he has to start button. I am able to get file object in handleSave function. I am passing this file object file reader and then reading as readAsText. But when check the readAsText object (myLogo) in console, it is indicating as undefined can any one help me to revolve it?

codesandbox link is added.

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