CODEWITHSUNDEEP
javascriptreactjs
Jonathan Small
Jonathan Small

Reputation: 1079

reactJS and reading a text file

I have a reactJS application where I need to read in a large text file and use the data from the file to populate some arrays. I came across some code examples and I am trying to implement this code:

        readTextFile = file => {
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = () => {
            if (rawFile.readyState === 4) {
                if (rawFile.status === 200 || rawFile.status == 0) {
                    var allText = rawFile.responseText;
                    console.log("allText: ", allText);
                    this.setState({
                        fundData: allText
                    });
                }
            }
        };
        rawFile.send(null);
    };

The code is called by executing this line of code:

this.readTextFile("../text/fund_list.txt");

When I execute the application, I get the following error message:

GET http://localhost:8080/text/fund_list.txt 404 (Not Found)

This is what my application structure looks like: enter image description here

The readTextFile function is in the account_balanc.js code and I am trying to read in the text file /text/fund_list.txt. The file does exist so obviously I am not referencing the file correctly but I don't know why.

I have tried this.readTextFile("../text/fund_list.txt") and this.readTextFile("./text/fund_list.txt"); but neither worked. I even tried moving fund_list.txt into the /screens folder and changing the function call to this.readTextFile("fund_list.txt"); but I still get the 404 error message.

Any ideas why?

Thank you.

Upvotes: 9

Views: 29899

Answers (6)

Soroush Chehresa
Soroush Chehresa

Reputation: 5678

You can use webpack raw loader and import the .txt file directly into the component.

First, install raw-loader:

npm i -D raw-loader

Second, add the loader to your webpack config:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

Then, directly import .txt to your component:

import txt from './file.txt';

Upvotes: 2

Zeeshan Ahmad
Zeeshan Ahmad

Reputation: 5644

Using HTML5 FileReader API you can easily read any file. Please have look at the following code:

function App() {
  const [json, setJson] = useState("");
  let fileInputRef = React.createRef();

  return (
    <div className="App">
      <p>{json}</p>
      <input
        type="file"
        ref={fileInputRef}
        style={{ display: "none" }}
        onChange={async e => {
          const reader = new FileReader();
          reader.onload = function() {
            const text = reader.result;
            setJson(text);
          };
          reader.readAsText(e.target.files[0]);
        }}
        accept=".json,application/json"
      />
      <button
        onClick={() => {
          fileInputRef.current.click();
        }}
      >
        Upload JSON file
      </button>
    </div>
  );
}

Here is a working Demo

Upvotes: 2

P Fuster
P Fuster

Reputation: 2334

I'm assuming you are using Webpack as the bundler.

The reason you were getting a 404 Not Found is because you need to configure Webpack to bundle the file into the build folder the website is hosting.

Moving it to the /public folder worked because Webpack was configured to bundle all the files in the /public folder as it is usually the entry point of the project (since this is probably create-react-app).

Also the folks at create-react-app are smart and saw that if it was a .txt extension file, they would bundle them into a /text folder in the build file, just as any .jpg or .png files will bundle into a /images folder.

Note that a lot of files need a special webpack loader if you import them in project, but you can also use a webpack plugin to copy the file into your bundle and then read that programmatically as you are doing.

Therefore once you moved it to that folder your application could actually find it in the build folder -hosted in localhost:8080 !

Upvotes: 2

AJ Genung
AJ Genung

Reputation: 341

Try...

const file = require("../text/fund_list.txt");

Then 

this.readTextFile(file);

Upvotes: -2

Jonathan Small
Jonathan Small

Reputation: 1079

I moved the fund_list.txt file into the public/text folder (after I created it) and changed the calling of the function to this.readTextFile("./text/fund_list.txt");

I saw this as a posted solution but then the post was removed (I don't know why) so I can't thank the user who posted it. But this solved my problem.

Upvotes: 5

Derek Sweet
Derek Sweet

Reputation: 1

I don't have a lot of experience with pure javascript applications, I usually use a rails backend, but I would recommend focusing on just being able to hit http://localhost:8080/text/fund_list.txt in a browser and get a response. Once you solve that it looks like the javascript will do it's thing.

Upvotes: 0

Related Questions