I want to read a text file (.txt) content on file browser using react technology.
Is any specific npm available to that?
Please give me a sample code.
Thanks.
2 Answers
You can use FileReader
const reader = new FileReader()
reader.onload = ()=>{
console.log(reader.result)
}
reader.readAsDataURL(filename)
And filename should obtained from a Html input and it will pass by onchange event as e.target.files[0]
<input type="file" onchange = {(e)=>setFilename(e.target.files[0])} />
Then reader looks like this:
import React, { useEffect, useRef } from "react";
export default function ReadTextFile({filename}){
const reader = useRef(new FileReader()).current;
useEffect(() => {
if (fileName) {
reader.readAsDataURL(fileName);
}
}, [fileName]);
useEffect(() => {
reader.onload = () => {
console.log(reader.result)
};
reader.onerror = () => {
console.log(reader.error)
};
});
useEffect(() => {
return () => {
reader.onload = null;
reader.onerror = null;
};
}, []);
return null;
}
1 Comment
Ben Jones
Why not combine the second two useEffects?
reader.onload = null seems to be cleanup for reader.onload = () => {/*stuff*/}fixed file upload as below.
import React, { Component } from 'react';
import { render } from 'react-dom';
class Create extends Component {
constructor() {
super();
this.state = {
name: 'React'
};
}
showFile = () => {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var preview = document.getElementById('show-text');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader()
var textFile = /text.*/;
if (file.type.match(textFile)) {
reader.onload = function (event) {
preview.innerHTML = event.target.result;
}
} else {
preview.innerHTML = "<span class='error'>No file!</span>";
}
reader.readAsText(file);
} else {
alert("Error!");
}
}
render() {
return (
<div>
<input type="file" onChange={this.showFile} />
<div id="show-text">Choose text File</div>
</div>
);
}
}
export default Create;