JSFiddle - React, Tailwind, and code Playground

by manoj_antony32

HTML

<input type="file" id="myFile">
<button onclick="loadFileAsText()">
Read
</button>
<textarea id="inputTextToSave"></textarea>
<button onclick="savefile()">
save</button>
<p id="dlink">
Click save button</p>

JavaScript

function loadFileAsText() {
  var myFile = document.getElementById('myFile').files[0];
  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent) {
   var textFromFileLoaded = fileLoadedEvent.target.result;
   console.log(textFromFileLoaded)
   document.getElementById("inputTextToSave").value = textFromFileLoaded;
  }
  fileReader.readAsText(myFile, "UTF-8");
}


function savefile() {
 var content = document.getElementById("inputTextToSave").value;
 uriContent = "data:application/octet-stream,"+encodeURIComponent(content);
 console.log(uriContent)
 document.getElementById('dlink').innerHTML = '<a href=' + uriContent + 'download=\'savedfile.txt\'>Here is the download link </a>';
}