Example of browser usage?

[timwis]

Hiya, forgive me if this is not the right venue for this question, but I've done some research and asked around before-hand and come up short. I've used this library several times in node.js and love it. I'd like to use it for a browser project, to make an open source UI for importing CSV files to an application.

The readme says:

csv-parser can be used in the browser with browserify.

Any chance you have an example of that? I'd love to use it with an <input type="file">, but I'm under the impression the FileReader type streams are not compatible with node-style streams. Is there some sort of interop tool out there? I can't imagine it's just brfs 🤔

Thanks for your time and great libs!

[timwis]

I was able to get it to work using filereader-stream.

import fileReaderStream from "filereader-stream";
import csv from "csv-parser";

const fileEl = document.getElementById("file");

fileEl.addEventListener("change", event => {
  const files = event.target.files;
  if (files.length === 0) return;

  fileReaderStream(files[0])
    .pipe(csv())
    .on("data", data => console.log(data));
});

I'm not sure how to verify that it's not simply loading the whole file into memory anyway though :/

[Blair2004]

@timwis I was close to drop the package until you make me change my mind. Thanks.

[SandyGifford]

This worked great - fileReaderStream has no problem with blobs so this works with direct strings as well:

import fileReaderStream from "filereader-stream";
import csv from "csv-parser";

new fileReaderStream(new Blob(["type,part\nunicorn,horn\nrainbow,pink"]))
    .pipe(csv())
    .on("data", data => console.log(data));

[fergusmeiklejohn]

I was able to get it to work using filereader-stream.

import fileReaderStream from "filereader-stream";
import csv from "csv-parser";

const fileEl = document.getElementById("file");

fileEl.addEventListener("change", event => {
  const files = event.target.files;
  if (files.length === 0) return;

  fileReaderStream(files[0])
    .pipe(csv())
    .on("data", data => console.log(data));
});

I'm not sure how to verify that it's not simply loading the whole file into memory anyway though :/

Should this go in the docs?

[xinluleo]

Hi, I am trying to add this to an event handler in my React component:

import csv from 'csv-parser'
import fileReaderStream from 'filereader-stream'

const onUpload = async () => {
    const results = []
    fileReaderStream(dataFile)
      .pipe(csv())
      .on('data', (data) => results.push(data))
      .on('end', () => {
        console.log(results)
        // [
        //   { NAME: 'Daffy Duck', AGE: '24' },
        //   { NAME: 'Bugs Bunny', AGE: '22' }
        // ]
      })
    console.log('results: ', results)

    onNextStep()
  }

However, I got the following error in my browser, and the component can't be rendered:

index.js:20 Uncaught (in promise) TypeError: Class extends value undefined is not a constructor or null
    at ../node_modules/csv-parser/index.js (index.js:20:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/LienWaiver/LienWaiverBulkUploadModal/LienWaiverBulkUploadImportStep.tsx (LienWaiverApprovalForm.tsx:159:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/LienWaiver/LienWaiverBulkUploadModal/LienWaiverBulkUploadModal.tsx (LienWaiverBulkUploadImportStep.tsx:192:1)
    at options.factory (react refresh:6:1)

Does anyone know what could be the issue? Many thanks!

[BenjaminHolland]

"csv-parser can be used in the browser with browserify"

I tried to get this to work and ran into numerous issues, one of which was not even knowing if I was doing it correctly. There needs to be more information on this feature.

[XingXiaoWu]

Hi, I am trying to add this to an event handler in my React component:

import csv from 'csv-parser'
import fileReaderStream from 'filereader-stream'

const onUpload = async () => {
    const results = []
    fileReaderStream(dataFile)
      .pipe(csv())
      .on('data', (data) => results.push(data))
      .on('end', () => {
        console.log(results)
        // [
        //   { NAME: 'Daffy Duck', AGE: '24' },
        //   { NAME: 'Bugs Bunny', AGE: '22' }
        // ]
      })
    console.log('results: ', results)

    onNextStep()
  }

However, I got the following error in my browser, and the component can't be rendered:

index.js:20 Uncaught (in promise) TypeError: Class extends value undefined is not a constructor or null
    at ../node_modules/csv-parser/index.js (index.js:20:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/LienWaiver/LienWaiverBulkUploadModal/LienWaiverBulkUploadImportStep.tsx (LienWaiverApprovalForm.tsx:159:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/LienWaiver/LienWaiverBulkUploadModal/LienWaiverBulkUploadModal.tsx (LienWaiverBulkUploadImportStep.tsx:192:1)
    at options.factory (react refresh:6:1)

Does anyone know what could be the issue? Many thanks!

same question