FileReader+textarea read

enter text in textarea first, and the FileReader file will not be read.
No problem if you don"t enter text

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title></title>
  <style>
  textarea{
    width: 50%;
    overflow: auto;
    word-break: normal;
    wrap="physical"
  }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body>

  <input type="file" name="file" id="filePickerOne" multiple/>
  <input type="button" value = ""  onclick="show()"/>
  <textarea class="textareaOne"  placeholder="Your input" disabled="disabled">
  </textarea>
  <div  id="open_button"><span><<</span></div>

  <script type="text/javascript">
  var textAreasOne = document.getElementsByClassName("textareaOne")[0];
  var spanWord = document.getElementsByTagName("span")[0];

  document.getElementById("open_button").addEventListener("click",function(){
    if(textAreasOne.scrollHeight > textAreasOne.offsetHeight){
      textAreasOne.style.height = textAreasOne.scrollHeight + "px";
      spanWord.innerHTML = "<<"
    }else{
      textAreasOne.style.height = "40px";
      spanWord.innerHTML = "<<"
    }
  })

  function show()
  {
      var reader = new FileReader();
      reader.onload = function()
      {
          var readerResult = reader.result;
          textAreasOne.textContent = readerResult;
          textAreasOne.disabled = false;
      }
      let f = document.getElementById("filePickerOne").files[0];
      reader.readAsText(f);

  }
  </script>
</body>
</html>
Jun.25,2021

https://codepen.io/jackpan/pe.
change textAreasOne.textContent = readerResult; to textAreasOne.value = readerResult;

Menu