Read csv file data onchange

[renjiie]

Bug Report

In the dropzone when a csv file is dropped the onchange function just shows the object which contains the file name and its size. But the file content is not present in the object to parse or read it.

Steps to reproduce

Steps to reproduce the behavior:

1. Create a dropzone dialog box
2. Click on upload file
3. Select a csv file
4. log the onchange object , no file content is getting logged

Expected behavior

Onchange the file content should also present in the object for further usage

Versions

• Browser: [e.g. chrome, safari]
• @material-ui/core version: [e.g. 4.9.2]
• material-ui-dropzone version: [e.g. 3.0.1]

[BaqerNaqvi]

is there any feature that will parse the file contents?

[ysuzuki19]

HI,
@renjiie
@BaqerNaqvi

I solved it by handleSave function (not only csv but also json).
i use react hooks and tsx, though.
and i work this code on Vivaldi (chromium based browser).

how about this?
and can you work this?

import React, { useEffect, useState } from 'react'
import {DropzoneDialog} from 'material-ui-dropzone'
import Button from '@material-ui/core/Button';

const DropzoneDialogWithReadFiles = (props:any) => {
  const [open, setOpen] = useState<boolean>(false);
  const [files, setFiles] = useState<Array<File>>([]);
  const [texts, setTexts] = useState<Array<string>>([]);

  const handleClose = () => {
    setOpen(false);
  }

  const handleSave = (acceptedFiles:Array<File>) => {
    setFiles(acceptedFiles);
    setOpen(false);

    acceptedFiles.forEach((file:File) => {
      const reader = new FileReader();

      reader.onload = () => {
        const str = reader.result as string;

        // log test
        console.log(typeof(str));
        console.log(str);

        // update files contents
        setTexts((t:Array<string>) => [...t, str]);
      }
      reader.readAsText(file);
    })
  }

  useEffect(() => {
    console.log(texts);
  }, [texts]);

  const handleOpen = () => {
    setOpen(true);
  }

  return (
    <div>
      <Button onClick={handleOpen}>
        Add Image
      </Button>
      <DropzoneDialog
        open={open}
        onSave={handleSave}
        acceptedFiles={['.json', '.csv']}
        showPreviews={true}
        maxFileSize={5000000}
        onClose={handleClose}
      />
    </div>
  );
}

export default DropzoneDialogWithReadFiles;

Thanks!

[OliverYao09]

Great solution, thanks a lot.

But how about if I need those content grouped by an array object, for example, if I expect the output should look like this:

[{
Name: "John Wick",
GroupType: "Salad",
ProductID: ["1","2"]
}, {
Name: "James",
GroupType: "Coffee",
ProductID: ["1","2"]
}]

Thanks in advance.

[ysuzuki19]

@OliverYao09
Hi! what extention is your file?

maybe, you can load content by changing ext to json.

data.json

{
"data": [
...
]
}

how about?