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?

Prostration

I did not get that error, or 0 for grantedBytes when testing this out. Used all the flags you listed except: --unsafely-treat-insecure-origin-as-secure, --unlimited-quota-for-files, --unlimited-storage. Only change I had to make was when wanting to do persistent data had to use navigator.webkitPersistentStorage.requestQuota first. – Madonna

@PatrickEvans Were you able to write to FileSystem at file: protocol? Which version of chrome or chromium? Can you post the .html file that you tested at file: protocol and js used at the .html file? – Prostration

Yea, it wrote the file with abc inside it for the both temp and persistent. I tried it both with Chrome(50.0.2661.102 m) and Chromium (53.0.2752.0) both on Windows 10. Sure I'll edit a link in a second – Madonna

Persistent storage version, Temporary storage version, and the command line switches: --allow-file-access-from-files --user-data-dir=/path/to/my/Desktop/data. And was launched using file url: file:///C:/Users/polar/Desktop/test.html – Madonna

@PatrickEvans The first version of chromium tested was user error; disk was full. Not certain why second version tested logged error. Was able to write to FileSystem at file: at third try by installing chromium 50.0.2661.102 at a live os. – Prostration

@PatrickEvans May have been use of an older profile configuration folder; used a different chromium configuration folder at same version and expected result was achieved. – Prostration

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

Prostration

Great to see a tested functional working example. THNAKS. (Except the first two instances of console.log() have no semicolons). All worked fine other than that. – Grouse