How to read text file in react

Question

I want to read from a text file within the react project, but when I try to execute and read I get a HTML sample code in the console log.

This is the function:

onclick= () =>{
 fetch('data.txt')
  .then(function(response){
    return response.text();
  }).then(function (data) {
    console.log(data);
  })
};

And the button which calls it:

<button onClick={this.onclick}>click string</button>

what you mean by 'htm sample code'? have you tried `./data.txt`? — ProblemsEverywhere, Apr 24 '19 at 12:48
@Drusto i have and same results, This is a bit of the output: " — Salvadore Rina, Apr 24 '19 at 12:59
The first answer can be accepted, but that is something that will not work unless you will add loader for webpack configurations, which will allow you to import text file. You can check [raw-loader](https://github.com/webpack-contrib/raw-loader) (A loader for webpack that allows importing files as a String.) — Hayk Aghabekyan, Apr 24 '19 at 12:55

score 63 · Answer 1 · answered May 30 '19 at 11:11

Simply try the below code and you may understand

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {
    super(props);
  }

  showFile = async (e) => {
    e.preventDefault()
    const reader = new FileReader()
    reader.onload = async (e) => { 
      const text = (e.target.result)
      console.log(text)
      alert(text)
    };
    reader.readAsText(e.target.files[0])
  }

  render = () => {

    return (<div>
      <input type="file" onChange={(e) => this.showFile(e)} />
    </div>
    )
  }
}

export default App;

Came here looking for THIS answer, as loading a file from the app itself wasn't the issue that led me here. — Taersious, Apr 11 '21 at 23:26

score 41 · Answer 2 · edited Mar 22 '23 at 17:09

41

If you want to get a .txt file first you have to import it:

import raw from '../constants/foo.txt';

After that, you could fetch it and transform into text:

fetch(raw)
 .then(r => r.text())
 .then(text => {
  console.log('text decoded:', text);
});

edited Mar 22 '23 at 17:09

fatihyildizhan

8,614
7
64
88

answered Nov 11 '20 at 15:01

jmtorralvo

511
4
3

4

Thanks! This solved my problem of trying to load a YAML file. `fs` didn't work, so I'm glad that `fetch` did! – alex Apr 11 '21 at 00:44
3

Got "Cannot find module '../foo1/foo2.txt' or its corresponding type declarations." – Benur21 May 21 '22 at 16:01
@Benur21 you can add the following code in Declaration File(d.ts) `declare module '*.txt';` – Sandro Mirijanashvili Jul 04 '22 at 18:55

score 18 · Answer 3 · edited Apr 10 '23 at 21:11

18

Try below approach :

import text from './data.js'; // The relative path to your File

console.log(text);

Create a file called data.js and add below content :

const text = "My Text goes here";

export default text;

edited Apr 10 '23 at 21:11

Tetie

365
1
14

answered Apr 24 '19 at 12:50

KOTIOS

11,177
3
39
66

Please post screenshot of you code and the code structure – KOTIOS Apr 24 '19 at 13:01
I cannot see above code in screenshot 1, you still using old approach – KOTIOS Apr 24 '19 at 13:08
i am not following you – Salvadore Rina Apr 24 '19 at 13:09
`import { text } from './data.txt';` this line is in your code? – KOTIOS Apr 24 '19 at 13:10
no it is not but when i paste it remains as an unused import – Salvadore Rina Apr 24 '19 at 13:12
Remove all code from your onClick and just use console as i did above and make sure you import the above line – KOTIOS Apr 24 '19 at 13:13
still the same results – Salvadore Rina Apr 24 '19 at 13:34
3

changing "import { text } from './data.js'"; to "import text from './data.js';" made it work for me – Viragos Jul 07 '19 at 19:38
`Attempted import error: 'text' is not exported from './data.js'.` – Philip Rego Oct 24 '20 at 04:40

score 0 · Answer 4 · edited Mar 22 '23 at 17:11

As React is JavaScript, so this code should work.

Html

<input type="file" id="fileInput" onchange="onLoad(event)">

JavaScript

onLoad = function (event){
 var file = fileInput.files[0];
    var textType = /text.*/;
    
    if (file.type.match(textType)) {
        var reader = new FileReader();
        
        reader.onload = function(e) {
            var content = reader.result;
            // Here the content has been read successfuly
            alert(content);
        }
        
        reader.readAsText(file);    
    } 
}

Event this will work, if directly on page load if you want to load the data.

import { text } from './data.txt'; // Relative path to your File
console.log(text);

How to read text file in react

4 Answers4

Linked