8

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)
                        })
                })
            }}
        >
sledgeweight
  • 7,685
  • 5
  • 31
  • 45

1 Answers1

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

Joe Duncan
  • 366
  • 2
  • 7
  • here to convert the array of array to object https://stackoverflow.com/questions/20807804/convert-an-array-to-an-array-of-objects – buncis Jan 02 '20 at 16:32