javascript - How to use webkitRequestFileSystem at file: protocol

Question

According to Exploring the FileSystem APIs at

Browser support & storage limitations

You may need the --allow-file-access-from-files flag if you're debugging your app from file://. Not using these flags will result in a SECURITY_ERR or QUOTA_EXCEEDED_ERR FileError.

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

Interestingly, when chromium opens a notification is displayed

You are using an unsupported command-line flag: --unsafely-treat-insecure-origin-as-secure. Stability and security will suffer.

There are other flags which are not specified which can be used; ignored notification as was still able to set and get localStorage at file: protocol, spcecifically files at file:///path/to/directory/*, though

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

logged

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 are modifications necessary at launch flags, workarounds or other approaches that would allow use of webkitRequestFileSystem at file: protocol?

Answer 1

The initial try received errors at terminal relating to lack of space on device. Received two separate errors code 7 InvalidStateError and code 3 AbortError. Note, chromium was launched in a sandbox at each configuration.

Was able to achieve expected result of writing to FileSystem at file: protocol by adjusting launch flags to --allow-file-access-from-files and specifying a different chromium configuration folder at --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 requirement.

Not entirely certain why original profile folder was using logged errors when attempting to access FileSystem at file: protocol. The folder could have been from a previous version of chromium. Generally launch new or newest version chromium from command-line where chromium folder in configuration directory may have been an older version with preferences already set. When reviewed terminal at one point no space left on disk message was logged in relation to FileSystem when launched using former profile configuration folder. Tried a newer version of chromium profile folder which solved issue.

Much credit for solution is due to @PatrickEvans for verifying that process was indeed possible; that it was more than likely a user error which was limiting realization of 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);
}