1

How do I edit a file in pure js (without node)? I get a file with an input field and I read its text like this:

var fileReader = new FileReader();
fileReader.readAsText(file);

fileReader.onload = function () {
    alert(this.result);
}

So, pretty straight forward. I tried to look on the net how to use a fileWriter but with no success. I just need to edit the text inside that file and save it, how can I do?

Johnson
  • 297
  • 2
  • 5
  • 18

2 Answers2

5

You can read in the data in the text file, modify it in client side JavaScript (no Node), and then output and re-save it. It does require user interaction, though.

This is a JS fiddle I modified that outputs the file from some text, although it does no reading of files.

Originally taken from this Stackoverflow question

(function () {
    var textFile = null;
  function makeTextFile(text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    return textFile;
  }


  var create = document.getElementById('create');
  var textbox = document.getElementById('textbox');

    //create a click event listener
  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.setAttribute('download', 'info.txt');
    //make the text file
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
        //wait for the link to be rendered and then initiate a click to download the file
     window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
    });
  }, false);

})();
Marcus Parsons
  • 1,714
  • 13
  • 19
  • 1
    Hey there's always a couple different ways to solve problems haha Yours is the technically correct one, because this way is not directly editing the file on the file system per se. It has to be overwritten by the user, but it goes to show it can be done with client side JS. – Marcus Parsons Jan 26 '18 at 21:10
3

You can't write files in a browser, you'll have to use node.

Ben West
  • 4,398
  • 1
  • 16
  • 16