Javascript/HTML5 - simple File system not working

Question

I decided to try out the HTML5 File System API, so I typed up a simple example from a tutorial:

window.addEventListener('load', function () {

    window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

    function initFs (fs) {
        console.log(fs);
    }

    function fsErr (err) {
        console.log(err);
    }

    window.requestFileSystem(window.TEMPORARY, 5*1024*1024, initFs, fsErr);

});

When I run this, a FileError object it logged(with a code of 2). Also, I am using windows(I say that because I thought this might have something to do with system security)

Any help is appreciated!

Answer 1

The error you are seeing is a SECURITY_ERROR. See: https://developer.mozilla.org/en-US/docs/Web/API/FileError?redirectlocale=en-US&redirectslug=DOM%2FFileError for more details. This is because you are using the file: protocol. You have 2 ways around this:

1. Serve files from a (local) webserver.
2. Use Chrome and launch with the --allow-file-access-from-files flag.

In general, the file system is meant to access sandboxed local files, so you can't access just any file on disk (this would be a massive security hole). So, you can't just read/write to C:\My Documents\my_credit_card_numbers.txt.

A really great tutorial is available at HTML5 Rocks