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?

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

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)