score:3

Accepted answer

What are you using to bundle your application? If you're using Webpack, you can use the raw-loader and directly import the txt file into your app.

Raw loader: https://github.com/webpack-contrib/raw-loader

Then you can simply: import txt from 'file.txt';

Either way you need to pull the data from your local file system and include it in your bundle using some method.

score:0

Have a look at PapaParse

http://papaparse.com/docs#local-files

It has the ability to read and parse local CSV files, which I think is what you are looking for.

There is also jsonfile, but that may use fs under the hood. https://github.com/jprichardson/node-jsonfile

score:0

I ran into a similar head-banging issue for loading a local csv. The first challenge is getting webpack to include the local file in the build. The best way to do that in Webpack 5 is with asset modules:

webpack.config.js

...
{
  test: /\.(csv)$/i,
  type: 'asset',
}

The second challenge is encapsulating the data into a variable. As Dan says, the best way is not AJAX, but using a named import.

import blob from './foo.csv';
console.log(blob)

---
data:text/csv;base64,U3RhdGUsQWJ...

blob is now a string. You need to extract the encoded value that represents your file contents and decode it from base64.

const encodedData = blob.split(",")[1] 
const data = atob(encodedData)
console.log(data)

---
header1,header2
val1,val2

Now data can be supplied to a csv parser (eg PapaParse).

score:3

Since you mentioned in comments that you used create-react-app for your project, the best solution at the moment would be a babel plugin called Raw.Macro.

This plugin allows you to access content of your files without a need to create-react-app eject. Provides really elegant solution without any boilerplate code.

Note: There is a small drawback that you have to re-start your webpack dev server when the file changes, because the content of a file is being embedded during the build process.

    import raw from 'raw.macro';

    function foo(){
        const jsonContent = raw('../utils/stops.json');
        console.log(jsonContent);
    }

score:4

You could use:

<input type=file></input> 

and have the user manually give the file to your app.


Related Query

More Query from same tag