CODEWITHSUNDEEP
javascripthtmlgoogle-chromehtml5-filesystem
木川 炎星
木川 炎星

Reputation: 4093

Trouble with the "File API: Directories and System" in Google Chrome

Having read this article on using the HTML5 File System API in Google Chrome, I decided to have a go at incorporating it into a packaged web application.

Using the notes and supplied code as a guide, I've put together a rather lengthy script as follows:

var FSA = FSA || {};
var fsys, root, fileReader, dropReader, dropContainer, btn = [];
window.addEventListener("load", function () {
    window.requestFileSystem(PERSISTENT, 5242880 /* ~5MB */, function(fs) {
        fsys = fs;
        root = fsys.root;
    }, FSA.error);
});
function createFile(path) { 
    root.getFile(path, {create:true, exclusive:true}, function() {
        console.log(path+ " file created"); 
    }, FSA.error); 
};
function saveFile(name, data, mimetype) {
    var e = this || null;
    name = name || e.target.name;
    data = data || e.target.result;
    mimetype = mimetype || e.target.type;
    root.getFile(name, {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(writer) {
            writer.onwrite = function(e) {
                console.log(name + ' written successfully to filesystem.');
                FSA.getFile(name);
            };
            writer.onerror = function(e) {
                console.log('Write failed: ' + e);
            };
            var bb = new BlobBuilder();
            bb.append(data);
            writer.write(bb.getBlob(mimetype));
        });
    }, FSA.error);
};
function openFile(file, fileTarget) {
    root.getFile(file.name, null, function(entry) {
        entry.file(function(file) {
                reader = new FileReader();
                reader.filename = file.name;
                reader.onload = function(e) {
                    fileTarget = e.target.result;
                };
                reader.readAsText(file);
        }, FSA.error);
    }, FSA.error);
};

And, to an extent, it seems to work. I can use the createFile function to create a file, and I can use the saveFile function to save a file. I cannot, however, seem to use the openFile function, and all three functions return the following error in the JavaScript console:

Uncaught TypeError: Cannot call method 'getFile' of undefined

I believe the problem has to do with the variable root, but I may be wrong.

As this is a new API, and a draft spec at that, there's very little documentation available to help solve this issue.

Would anyone be able to point out the problem(s), and, if so, contribute a solution?

Thanks for your help.

EDIT: I'm using "10.0.639.0 canary build", so I believe that my browser should allow the API to be used in extensions.

Upvotes: 2

Views: 3138

Answers (1)

Mohamed Mansour
Mohamed Mansour

Reputation: 40149

For now, the FileSystem API getFile does not work in extension on any Chrome 8. You will need to run to run the code in a web page hosted externally if you want to create new files with getFile.

It will be supported in Chrome 9+ within Extensions. For more information read the HTML5 Chromium mailing list post.

I am running Google Chrome 10.0.634.0 Dev Channel. And within the inspector:

window.requestFileSystem(PERSISTENT, 5242880 /* ~5MB */, function(fs) {
  root = fs.root;
})
root.getFile

Returns:

function getFile() { [native code] }

Upvotes: 2

Related Questions