How to use FileReader in React?

I found that code snippet on MDN Documentation, and that solved my problem i am hopping that this could help someone else:

// Callback from a <input type="file" onchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    // The file's text will be printed here
    console.log(event.target.result)
  };

  reader.readAsText(file);
}

More informations at https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader/onload

handleFile = (e) => {
  const content = e.target.result;
  console.log('file content',  content)
  // You can set content in state and show it in render.
}

handleChangeFile = (file) => {
  let fileData = new FileReader();
  fileData.onloadend = handleFile;
  fileData.readAsText(file);
}

render(){
  return(
     <div>
        <input type="file" accept=".txt" onChange={e => 
            handleChangeFile(e.target.files[0])} /> 
     </div>
  )
}

hey this copying and paste is okay.. but these answers dont refer to state. also using reading data as url is easier for an img tag

    function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    // The file's text will be printed here
    SET STATE HERE FOR URL!!!!
    
  };

  reader.readAsDataURL(file);
}

A simple way to use FileReader in Reactjs component

To get the content of the file reader in react I used the callback function to update the state as used in the MDN Web docs.

React component

// state to store the base64
const [base64File, setbase64File] = useState(null);

// Create the callback function
const base64Callback = async (err, res) => {
    if (!err) {
      setbase64File(res); // setting the state is the important part 
    } else {
      setbase64File(null);
    }
  };

// call function to convert to base64
getBase64(fileObj, base64Callback);

Function to convert to base64

async function getBase64(file, callback) {
  const reader = new FileReader();
  reader.onload = () => callback(null, reader.result);
  reader.onerror = (error) => callback(error);
  reader.readAsDataURL(file);
}

export default getBase64;

The above code is a modified version of code from the MDN Web docs site click for more

Install react-file-reader (A flexible ReactJS component for handling styled HTML file inputs.)

Simple Example

import ReactFileReader from 'react-file-reader';

class Dashboard extends Component {
  state = {
    file : ""
  }

  handleFiles = files => {
    this.setState({
      file: files.base64
    })
  }
  render() {
    return(
      <div className="files">
        <ReactFileReader handleFiles={this.handleFiles}>
          <button className='btn'>Upload</button>
        </ReactFileReader>

        <p>Read</p>
        <iframe src={this.state.file} frameBorder="0" height="400" width="50%" />
      </div>
    )
  }
}

Update Answer: This repository has been archived by the owner. It is now read-only.