how to read text file and display in textarea in react js

Question

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;

Similar issue with the solution can be found here: https://stackoverflow.com/questions/55830414/ — Sofiane999, Jul 18 '22 at 06:14
can you help how to replace string in above code to replace string \u001bE with but need this in react js — ReactNative, Jul 18 '22 at 07:58

score 0 · Answer 1 · answered Jul 18 '22 at 06:26

<!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>

can you help how to replace string in above code to replace string \u001bE with but need this in react js — ReactNative, Jul 18 '22 at 07:57

score 0 · Accepted Answer · answered Jul 18 '22 at 06:33

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;

can you help how to replace string in above code to replace string \u001bE with — ReactNative, Jul 18 '22 at 07:33

how to read text file and display in textarea in react js

2 Answers2