Convert CSV to JSON client side with React DropZone

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.

            onDrop={(acceptedFiles, rejectedFiles) => {
                acceptedFiles.forEach(file => {
                    let tempFile = file.preview
                        .fromSteam(tempFile) // this errors with fs.exists not a function as its not running serverside


Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

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) => {


// ...

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

FileReader API:
csv package:

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply