Does HTML5 allow you to interact with local client files from within a browser

Question

I've seen some posts regarding access to files on a client machine by a webpage, namely this question.

I'm trying to hop on the "continuously update in the cloud" paradigm for some algorithms I am writing so my users can access the latest versions by simply accessing the webpage. This requires that the program/webpage can start with a directory and recursively inspect files within it and compute results based on what is found. In the end it also should be able to write the results file to the client's filesystem.

One of the answers in that previous question mentions Google Gears but that has since been discontinued in favor of HTML5. Is access to a client directory possible within HTML5? How?

I know why access by any webpage to local files is a security risk, but for my purpose I have no problem to ask the user for the appropriate permissions.

Answer 1

No, not directly at least. However, you have a number of choices here.

Currently your best choices are:

• Drag and drop files from desktop, see a tutorial. (Link disabled for malware/phishing)
• Use input type file.
  • Read the contents with the File API or submit the form. Read more on Mozilla Developer Center about reading the file dynamically.
  • You can specify multiple attribute to read and open multiple files at once without having to have separate fields.
  • You can have an invisible input and "trigger a click" on it to open the file open dialog. See the previous Mozilla Developer Center link for details.
• Use the FileSystem API which allows you to create, delete, read, modify files on the file system. Note: you get a sandboxed directory to work with, you can't access the whole system just like that.
• Use Java with signed applets to access the whole file system. This requires the user to accept the signature.

Answer 2

Chrome 6 also will support the File API

Answer 3

As previously mentioned, the FileSystem and File APIs, along with the FileWriter API, can be used to read and write files from the context of a browser tab/window to a client machine.

There are several things pertaining to the FileSystem and FileWriter APIs which you should be aware of, some of which were mentioned, but are worth repeating:

• Implementations of the APIs currently exist only in Chromium-based browsers (Chrome & Opera)
• Both of the APIs were taken off of the W3C standards track on April 24, 2014, and as of now are proprietary
• Removal of the (now proprietary) APIs from implementing browsers in the future is a possibility
• A sandbox (a location on disk outside of which files can produce no effect) is used to store the files created with the APIs
• 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) is used represent the files created with the APIs

Here are simple examples of how the APIs are used, directly and indirectly, in tandem to do these things:

BakedGoods*

Write file:

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

Read file:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Using the raw File, FileWriter, and FileSystem APIs

Write file:

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);

Read file:

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

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

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

Given the current statuses the FileSystem and FileWriter APIs, their utilization to read and write files currently does not constitute an "HTML5 way" of doing those things.

Renewed interest in the APIs from the un-implementing browser vendors may place them right back on the standards track, though. That, combined with the high market penetration of Chromium-based browsers and the fact that Google (the main contributer to Chromium) has not given and end-of-life date to the APIs should be enough to justify their use in some cases.

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