import React from 'react';
const Dashboard = () => {
const handleChange = () => {
let input = document.querySelector('input');
let textarea = document.querySelector('textarea');
input.addEventListener('change', () => {
let files = input.files;
if (files.length === 0) return;
const file = files[0];
let reader = new FileReader();
reader.onload = (e) => {
const file = e.target.result;
const lines = file.split(/\r\n|\n/);
console.log(lines);
textarea.value = lines.join('\n');
};
reader.onerror = (e) => alert(e.target.error.name);
reader.readAsText(file);
}); }
return ( <div style={{display: 'flex', }} >
<input type="file" name="input" onChange={handleChange}/>
<textarea cols={30} rows={20}
style={{marginTop: 15, width:'50%'}} ></textarea>
</div>
)
};
export default Dashboard;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript">
const onFileChange = () => {
let files = document.querySelector("#file-input").files;
if (files.length === 0) return;
const file = files[0];
let reader = new FileReader();
reader.onload = (e) => {
const file = e.target.result;
const lines = file.split(/\r\n|\n/);
console.log(lines);
document.querySelector("textarea").value = lines.join('\n');
};
reader.onerror = (e) => alert(e.target.error.name);
reader.readAsText(file);
}
</script>
<form>
<input type="file" name="input" id="file-input" onchange="onFileChange()" />
<textarea cols={30} rows={20} id="textarea"></textarea>
</form>
</body>
</html>When using react, you should avoid using query selectors as it will defeat the purpose of using react. Instead use states to maintain the values of textArea so that whenever there is a state update, re-render is triggered. You can use the implementation below:
import React, { useState } from "react";
const Dashboard = () => {
const [textValue, setTextValue] = useState("");
const handleChange = (e) => {
const file = e.target.files[0];
let reader = new FileReader();
reader.onload = (e) => {
const file = e.target.result;
console.log(file);
setTextValue(file);
};
reader.onerror = (e) => alert(e.target.error.name);
reader.readAsText(file);
};
return (
<div style={{ display: "flex" }}>
<input type="file" name="input" onChange={handleChange} />
<textarea
cols={30}
rows={20}
value={textValue}
onChange={setTextValue}
style={{ marginTop: 15, width: "50%" }}
></textarea>
</div>
);
};
export default Dashboard;