How to use webkitRequestFileSystem in file: protocol

Question

According to Exploring File System APIs in

Browser support and storage restrictions

You may need the flag --allow-file-access-from-files if you are debugging your application from file:// . Do not use these flags in SECURITY_ERR or QUOTA_EXCEEDED_ERR FileError.

Running chrome with --allow-file-access-from-files , --unlimited-storage and possibly obsolete --unlimited-quota-for-files ; also --unsafely-treat-insecure-origin-as-secure=file:///path/to/directory/* with the set --user-data-dir=/path/to/directory .

Interestingly, when chrome opens, a notification is displayed

An unsupported command line flag is used: --unsafely-treat-insecure-origin-as-secure . Stability and security will suffer.

There are other flags that are not specified, which can be used; ignored notification, which could still be set and get localStorage in file: protocol, spcecifically files in file:///path/to/directory/* , although

 navigator.webkitTemporaryStorage.requestQuota(1024*1024, function(grantedBytes) { console.log(grantedBytes) }, errorHandler); 

logged 0 where errorHandler is

 function errorHandler(e) { console.log(e) } 

Also

 function writeFile(fs) { fs.root.getFile("file.txt", {create: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { // call `readFile` window.requestFileSystem(window.TEMPORARY, 1024*1024, readFile, errorHandler); }; fileWriter.onerror = errorHandler; var blob = new Blob(["abc"], {type: "text/plain"}); fileWriter.write(blob); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, writeFile, errorHandler); function readFile(fs) { fs.root.getFile("file.txt", {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { console.log(e.target.result) }; reader.readAsText(file); }, errorHandler); }, errorHandler); } 

entered

 FileError {code: 7, name: "InvalidStateError", message: "An operation that depends on state cached in an in…he state had changed since it was read from disk."} code:7 message:"An operation that depends on state cached in an interface object was made but the state had changed since it was read from disk." name:"InvalidStateError" __proto__:DOMError 

Question: What changes are needed for launch flags, workarounds, or other approaches that would allow using the webkitRequestFileSystem protocol in file: :?

Answer 1

The initial attempt to get errors in the terminal due to lack of space on the device. Two separate errors were AbortError : code 7 InvalidStateError and code 3 AbortError . Note that chrome was running in the sandbox in each configuration.

The expected result of writing to the FileSystem at file: protocol is achieved by setting the launch flags to --allow-file-access-from-files and specifying another chrome configuration folder as --user-data-dir=/newer/version/of/profile/folder ; --unlimited-quota-for-files and --unsafely-treat-insecure-origin-as-secure=file:///path/to/directory/* were not necessary to achieve the requirement.

It is not entirely clear why the source profile folder used the registered errors when trying to access the FileSystem at file: protocol. The folder could be from a previous version of chrome. Usually launches a new or latest version of chromium from the command line, where the chromium folder in the configuration directory may have been an older version with settings already configured. When viewing the terminal at one point, no space left on disk message was registered relative to the FileSystem at startup using the previous profile configuration folder. Tried a newer version of the chrome profile folder, which solved the problem.

The big merit of the solution is @PatrickEvans to verify that this process is indeed possible; which was more than likely a user error that limited the implementation of the expected result.

 var requestedBytes = 16, _grantedBytes; function errorHandler(e) { console.log(e) } function writeFile(fs) { console.log(fs) fs.root.getFile("file.txt", { create: true }, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { // call `readFile` console.log(_grantedBytes); window.webkitRequestFileSystem(window.TEMPORARY , _grantedBytes , readFile , errorHandler); }; fileWriter.onerror = errorHandler; var blob = new Blob(["abc"], { type: "text/plain" }); fileWriter.write(blob); }, errorHandler); }, errorHandler); } navigator.webkitTemporaryStorage.requestQuota(requestedBytes , function(grantedBytes) { console.log(grantedBytes); _grantedBytes = grantedBytes; window.webkitRequestFileSystem(window.TEMPORARY , grantedBytes , writeFile , errorHandler); }, errorHandler); function readFile(fs) { fs.root.getFile("file.txt", {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { console.log(e.target.result, fileEntry.toURL()); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }