Cover image for Frontend Shorts: How to Read Content From The File Input in React

Frontend Shorts: How to Read Content From The File Input in React

ilonacodes profile image Ilona Dee Codes Originally published at Medium ・1 min read

As you know, I prefer learning to code by doing things. So, today I want to share the feature I have implemented for the app is the reading of the content from the uploaded (local) *.csv file from the user.

To do so without a server or any back-end β€” is a challenge.

To make things work properly in React+Redux, I have created the following component:

The FileReader object lets web apps asynchronously read the contents of files stored in the user’s computer, using File or Blob objects to specify the file or data to read.

Then the readAsText method is used to read the contents of the specified File or Blob. When the read operation is complete, the state is changed to done; the onloadend is triggered, and, if fileReader.result is not null, the constant content contains the contents of the file as a text string.

Any load event of fileReader object sets the result value asynchronously, and according to the code snippet above the fileReader.onloadend callback can access the result of uploaded file by the user.

If you would like to know more, then read about FileReader, File, and readAsText at MDN

Thank you for reading!

I hope you find the post useful and will still be looking forward to new updates there.

Photo by Kolar.io on Unsplash

Posted on by:

ilonacodes profile

Ilona Dee Codes


I help developers to condense finance + investment knowledge via my tiny newsletters (+1000 readers) πŸ“¨ Get top-15 tips on how to save more cash monthly πŸ‘‡


markdown guide