Can I write files with HTML5/JS?

Question

I wonder if there is any way I can write to files from HTML5/JS? In the broswer ...

Answer 1

Assuming your end goal is to let the user save your file somewhere where they will find it, as when right-clicking a link and choosing "Save As...", there isn't wide browser coverage for those APIs yet, likely due to security considerations.

What you can do, however – APIs or not – is cheesing it with a link to a data: uri with a download attribute specifying your suggested filename. For instance:

<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;">Save</a>

When clicked, at least in Chrome, this will save a file containing the text mostly harmless (and a trailing newline) as earth.txt in your download directory. To set the file contents from javascript instead, call this function first:

function setSaveFile(contents, file_name, mime_type) {
  var a = document.getElementById('save');
  mime_type = mime_type || 'application/octet-stream'; // text/html, image/png, et c
  if (file_name) a.setAttribute('download', file_name);
  a.href = 'data:'+ mime_type +';base64,'+ btoa(contents || '');
}

Answer 2

Yes, using the new FileWriter API.

http://www.w3.org/TR/file-writer-api/

You can see the current browser support here: http://caniuse.com/#feat=filesystem

Answer 3

Yes it is possible to read & write files using HTML5+JS.

Link to get you started - Exploring FileSystem API

I also wrote an article a while back for SpeckyBoy on the same topic that you might find useful - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

Answer 4

As far as I know, you can't write to files from HTML5, because giving a web page access to the user's files would be a security risk.

If you just need to store some data so your page can access it later, HTML5 does have something called Web Storage which can do that.

Or you could store the data in cookies (if it's very small) or on the server.

Answer 5

Another possibility is to consider creating something like a ClickOnce app in the Windows platform. This would present a link to a downloadable executable that would run in the user's OS but could make web-based callbacks to send and retrieve data. The ClickOnce app could embed a browser control and thus you would have both a web-compatible application with the ability to talk directly to the user's storage.

Answer 6

The answer to this question depends on your answers to the following questions:

• Are you fine with the fact that support for such a capability currently exists only in Chromium-based browsers (Chrome & Opera)?
• Are you fine with utilizing an as-of-now proprietary API to take advantage of such a capbility?
• Are you fine with the possibility of removal of said API in the future?
• Are you fine with the constriction of files created with said API to a sandbox (a location outside of which the files can produce no effect) on disk?

If you answered "yes" to all of the above, then yes, with the FileWriter and FileSystem APIs, you can write files from the context of a browser tab/window using Javascript.

Here is a simple example of how the APIs are used in tandem to do this:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

With BakedGoods*, a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native (including FileSystem), and some non-native storage facilities, the above is accomplished with this:

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", type: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

The FileSystem spec defines no guidelines on how directory structures are to appear on disk. In Chromium-based browsers for example, the sandbox has a virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser), within which the directories and files created with the APIs are placed.

So though you may be able to write files to a system with the APIs, locating the files without the APIs (well, without the FileSystem API) could be a non-trivial affair.

*BakedGoods is maintained by none other than this guy right here :)