Saturday 10 December 2016

Create files with Javascript

In web apps (the new trend is to call them progressive apps) it is often useful to create files on the fly. On this I talk about creating files on the user’s computer by executing some piece of code on the user’s browser and then let the user view them and even store them locally. The other alternative is to create files on the cloud so that the user may then download them, but sometimes this is not necessary. So let’s see how this can happen by placing a few lines of Javascript code on the web app.
The following example regards creating text files from text that is inputted by the user. For this we need a web page with basic formation and a textarea with id=”input” where users may type whatever they wish. Then some function that creates a file from input. And finally a function that makes the file downloadable.
The makeTextFile function creates the file on text input. At first it creates a null variable named textFile which will become the text file. Then a Blob named “data”. A blob is an object of immutable data (text or binary) that may be used like a file and Javascript uses blobs in order to manipulate files; in some cases this technique is used in order to prevent direct access of a script to the file system. You may create blobs containing binary or text data but in this example we focus on text files so our blob is of type 'text/plain'. Next step is to create a URL pointing to the blob using function URL.createObjectURL.

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


Function txt() that follows stores user input in variable textbox which will then be the input of makeTextFile function. Then the link with id=”downloadlink” of the web page is declared to point to the output of makeTextFile function. So by clicking on the link, user input is downloaded as a text file.

function txt() {
    var textbox = document.getElementById('input');
    var link = document.getElementById('downloadlink');
    document.getElementById('downloadlink').download='notes.txt';
    link.href = makeTextFile(textbox.value);
}


Find the full source code of the above example in this link. In order to make this example I used various sources and examples from the web so there is no ownership on it; in other words “use it as you wish”.