How to use navigator instead of window.webkitStorageInfo HTML5 File-system API?

Question

So there is a similar post found here html-5-filesystem-access-type-error. However, I'm not very satisfied with the conclusion because I do not feel it actually answered the question - the solution given is the deprecated code solution. Does anyone know how to use navigator instead of window as the Chrome console is informing to do?

I have been using the following and it works, but the chrome console keeps informing me not to do so because it is deprecated.

Working Deprecated Code

window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024*280, function(grantedBytes) {
    window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, function(e) {
    console.log('Error', e); 
});

Note: onInitFs and errorHandler are both functions defined elsewhere, that work.

Console Log - The message I get in the console is as follows:

'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage'
or 'navigator.webkitPersistentStorage' instead. 

So the best practice would be to stop using the deprecated method. Unfortunately, when I replace window with navigator it crashes (see below). How does one use navigator instead of window to access the file system?

Arbalest

Answer 1

Below are two examples with the current API.

It uses navigator.webkitPersistentStorage.requestQuota instead of the deprecated window.webkitStorageInfo.queryUsageAndQuota:

Query Quota

navigator.webkitTemporaryStorage.queryUsageAndQuota ( 
    function(usedBytes, grantedBytes) {  
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    }, 
    function(e) { console.log('Error', e);  }
);

Request Quota

var requestedBytes = 1024*1024*280; 

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {  
        console.log('we were granted ', grantedBytes, 'bytes');

    }, function(e) { console.log('Error', e); }
);

You have to choose either temporary (webkitTemporaryStorage) or persistent (webkitPersistentStorage) storage to query.

The current Chrome implementation tracks this specific spec version, which describes things a bit more: http://www.w3.org/TR/2012/WD-quota-api-20120703/

chromestore.js provides an easier API for this data.

---

To answer your original question, your new code would look like this:

Request quota and initialize filesystem

var requestedBytes = 1024*1024*280; 

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {  
        window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 

    }, function(e) { console.log('Error', e); }
);

Potsdam

Hi, I got "[ts] Property 'webkitTemporaryStorage' does not exist on type 'Navigator'" error in typescript.can you pls help me to solve it – Whiteness

Answer 2

The error message tells you to use navigator.webkitTemporaryStorage or navigator.webkitPersistentStorage and you try to use navigator.webkitStorageInfo which is undefined.

UPDATE: PERSISTENT should not be passed to navigator.webkitTemporaryStorage or navigator.webkitPersistentStorage but only to window.webkitRequestFileSystem. Then there is no more error. (see: Filesystem API not working in Chrome v27 & v29)

Ariew

Good catch, I was hoping that was going to make things work! Unfortunately, It gave me a different error. I've updated the code above. Thanks for the help. – Arbalest

Answer 3

Recently, i've spent some time creating an abstraction layer for the Filesystem API with Persistent Storage called Chromestore.js. I've fixed this error in the abstraction layer by using the same solution talked about here. But with this API, there's no need to worry about it and it's clean.

https://github.com/summera/chromestore.js

It provides some additional functionality that is pretty handy as well. It definitely needs to be expanded upon, which I plan on doing soon. Any suggestions/feedback is much appreciated! This should make it easier for those using the FileSystem API. Especially for those trying to store large amounts of data retrieved from remote servers.

Examples and documentation are here: https://github.com/summera/chromestore.js/blob/master/chromestore-api.md

I think this has the potential to be expanded and do some really neat things with data and the Filesystem API.

Cheers!

Alternator