Uncaught TypeError: Cannot read property 'root' of undefined

Question

I'm trying to implement file api storage for offline capabilities in an html5 web app and I'm running into a few issues.

I have the following code in an included JS file (a library I'm creating for working with file api):

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, initFS, errorHandler);

function initFS(fs) {
    alert("Welcome to Filesystem! It's showtime :)"); // Just to check if everything is OK :)  
    fs.root.getDirectory('files', { create: true }, function(dirEntry) {
        alert('You have just created the ' + dirEntry.name + ' directory.');
    }, errorHandler);
}

In another JS file (where the majority of my work (business logic) is done), I have:

//INITALIZE
function InitalizeStore() {
    initFS();

    //more init's done here
}

The problem I run into is in the initFS function, fs.root.getDirectory('files'... throws an error: Uncaught TypeError: Cannot read property 'root' of undefined.

I have tried some file api wrappers (filer.js and webfs.js) and even tried writing my own wrapper and have had no luck in implementing file api (each wrapper produced the same error).

I have tried using app cache, but I've run into memory limitations (lack of space) because of the nature of my application. Also, this will ONLY be run in Chrome.

How can I get my fs object to initialize to a proper "file system" object so I can read/write files offline?

See http://www.html5rocks.com/en/tutorials/file/filesystem/, you have to request a file system, passing the init function as a callback. — bfavaretto, Aug 14 '13 at 18:49

Jonathan Lonowski · Accepted Answer · 2013-08-14T19:11:24.777

The error is because fs is undefined. And undefined cannot have properties like root.

initFS is written to expect that a value is passed for fs.

function initFS(fs) {
    fs.root.getDirectory(...);
}

But, it's being called without any arguments, so fs won't have such a value.

function InitalizeStore() {
    initFS();

    // ...
}

How can I get my fs object to initialize to a proper "file system" object so I can read/write files offline?

You use it as a callback for requestFileSystem(), which you're already doing elsewhere.

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, initFS, errorHandler);

If you want the creation to wait until InitializeStore() is called, move that line inside the function:

function InitalizeStore() {
    window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, initFS, errorHandler);

    // ...
}

I realized this error after rubber-ducking with a colleague - after I submitted my question. But after the modification, I was still running into the same issue which has turned out to be a timing issue. I had to add all the init's to a "ready" event when declaring my `fs` object. — djm61, Aug 14 '13 at 22:57

Uncaught TypeError: Cannot read property 'root' of undefined

1 Answers1