Convert CSV to JSON client side with React DropZone

Question

From React dropzone, i receive a File object with a File.preview property whose value is a blob:url. i.e. File {preview: "blob:http://localhost:8080/52b6bad4-58f4-4ths-a2f5-4ee258ba864a"

Is there a way to convert this to json on the client? The file isnt need to be stored in a database (the convert JSON will be). I've attempted to use csvtojson but it's unable to use the file system as it uses node to power it. Ideally would like to convert this in the client if possible, once user has uploaded it. Any suggestions welcomed.

        <Dropzone
            name={field.name}
            onDrop={(acceptedFiles, rejectedFiles) => {
                acceptedFiles.forEach(file => {
                    console.log(file)
                    let tempFile = file.preview
                    csv()
                        .fromSteam(tempFile) // this errors with fs.exists not a function as its not running serverside

                        .on('end_parsed',(jsonArrObj)=>{
                            console.log(jsonArrObj)
                        })
                })
            }}
        >

Joe Duncan · Accepted Answer · 2017-05-03 16:49:30Z

18

Yes, its possible with FileReader and csv:

import csv from 'csv';

// ...

const onDrop = onDrop = (e) => {
    const reader = new FileReader();
    reader.onload = () => {
        csv.parse(reader.result, (err, data) => {
            console.log(data);
        });
    };

    reader.readAsBinaryString(e[0]);
}

// ...

<Dropzone name={field.name} onDrop={onDrop} />

FileReader API: https://developer.mozilla.org/en/docs/Web/API/FileReader
csv package: https://www.npmjs.com/package/csv

answered May 3, 2017 at 16:49

Joe Duncan

3862 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

buncis Over a year ago

here to convert the array of array to object stackoverflow.com/questions/20807804/…

Collectives™ on Stack Overflow

Convert CSV to JSON client side with React DropZone

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related