Why does this filesystem api requestQuota call fail?

javascript html google-chrome html5-filesystem

20,588

Solution 1

Not sure this is the best answer but it appears to be a security restriction on local files. Starting Chrome as below fixes the issue:

google-chrome --allow-file-access-from-files

That will allow creating persistent storage.

Solution 2

If your app requires the user to double-click on an html file, then your answer might be the only way to go. However, if the need is to access a local file, but you have some flexibility in terms of how to access that local file, then consider creating a small local server.

On Windows, install http-server (npm install -g http-server) and run http-server from your project directory. On Mac/Linux, run python -m SimpleHTTPServer from your local directory. In the browser, access the locally hosted web site. On Windows I had to use localhost:8080 while on the Mac I had to use localhost:8000.

All credit for this answer goes to @orszaczky who gave this answer to another SO question. That answer also discusses why this is a security issue, and why using the --allow-file-access-from-files flag is potentially dangerous.

By the way, this is not only an issue for Chrome (v49.0) but also for Opera (v35.0), on both Windows and Mac.

20,588

Author by

Don Rhummy

SOreadytohelp

Updated on January 04, 2020

Comments

Don Rhummy over 4 years

I'm writing an HTML5 app to run in Chrome but it will be on the local filesystem (so they'll start it by double-clicking an html file). It is throwing an error when I try to access the filesystem and I think it's because it's a local file. Is there a way to make Chrome allow this?

(NOTE: I do get the popup asking me to allow the app to store permanantly and I click "OK". It still throws this error)

The below code throws the error:

DOMException {message: "NotSupportedError: DOM Exception 9", name: "NotSupportedError", code: 9, INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2…}

filetest.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
        //File System handler
        window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

        function onInitFs(fs) {
            console.log('Opened file system: ' + fs.name);
        }

        function errorHandler(e) {
            var msg = '';

            switch (e.code) {
            case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                break;
            case FileError.NOT_FOUND_ERR:
                msg = 'NOT_FOUND_ERR';
                break;
            case FileError.SECURITY_ERR:
                msg = 'SECURITY_ERR';
                break;
            case FileError.INVALID_MODIFICATION_ERR:
                msg = 'INVALID_MODIFICATION_ERR';
                break;
            case FileError.INVALID_STATE_ERR:
                msg = 'INVALID_STATE_ERR';
                break;
            default:
                msg = 'Unknown Error';
                break;
            };

            console.log('Error: ' + msg);
        }

        /** THIS CAUSES IT TO THROW AN ERROR */
        window.webkitStorageInfo.requestQuota(window.PERSISTENT, 5*1024*1024, function(grantedBytes) {
                window.requestFileSystem(window.PERSISTENT, grantedBytes, onInitFs, errorHandler);
        }, function(e) {
            console.log('Error', e);
        });
        </script>
    </body>
</html>

If I instead change it to ask for temporary storage, it still throws an error, but now it's a SECURITY_ERR:

window.requestFileSystem(window.TEMPORARY, 5*1024*1024, onInitFs, errorHandler);

Rob W about 11 years

I think that you'd better pack your application as a Chrome extension. This brings even more possibilities to your app, such as cross-origin AJAX, and unlimited quota.
Don Rhummy about 11 years

That's what I'll do. I actually don't need AJAX as it's 100% offline, but the unlimited quota is worth it.
AmyWuGo over 10 years

Hi, Don. I got the same problem and tried to launch chrome like this, chrome --allow-file-access-from-files file:///C:/test%20-%203.html but, it doesn't work. Do you have some idea? Thank you very much.
Don Rhummy over 10 years

@AmyWuGo I'm not sure. What OS are you using? What happens if you start chrome without that file:///C:/test%20-%203.html and instead open that from within Chrome?
AmyWuGo over 10 years

@Don Thank you very much. I figure it out by reboot OS. And if you don't mind I have another question. I just want to the exactly what you do. And could tell me which API you used at the end. Thank you.
Don Rhummy over 10 years

@AmyWuGo I changed my app to be a Chrome Packaged App. Those don't have the same restrictions. You just put the file api permission request in the manifest file and it allows it.
Nevin Madhukar K about 10 years

Is there any permanent fix for this,rather than having to start over chrome every time i need to run my project through this?
Don Rhummy about 10 years

@NevinMadhukarK you could make it into a chrome app
Gabriel Pumple over 4 years

running simple server did work for me, but this morning the allure report was pretty with graphics and what-not. Then it stopped working this afternoon, now I've started simple server and it works again, but it is a super simple interface and not pretty. Any ideas what could have happened?
Andrew Willems over 4 years

Sorry, but I don't think I can help you on that one. If you do figure out your own solution, it would be great if you could include it here in these comments. All the best. And thanks for the heads-up about the capitalization typo (SimpleHttpServer should be SimpleHTTPServer) in my answer. Your edit/correction was indeed required.
Don Rhummy about 4 years

@AshokkumarGanesan this is the command you use at the command line to start up Chrome