Why does this filesystem api requestQuota call fail?
Asked Answered
P

2

7

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);
Pacha answered 10/5, 2013 at 17:30 Comment(0)
P
13

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.

Pacha answered 10/5, 2013 at 17:53 Comment(9)
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.Knowling
That's what I'll do. I actually don't need AJAX as it's 100% offline, but the unlimited quota is worth it.Pacha
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.Cabinetmaker
@Cabinetmaker 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?Pacha
@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.Cabinetmaker
@Cabinetmaker 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.Pacha
Is there any permanent fix for this,rather than having to start over chrome every time i need to run my project through this?Goldagoldarina
@NevinMadhukarK you could make it into a chrome appPacha
@AshokkumarGanesan this is the command you use at the command line to start up ChromePacha
H
4

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.

Hofuf answered 7/3, 2016 at 6:39 Comment(2)
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?Distinguished
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.Hofuf

© 2022 - 2024 — McMap. All rights reserved.