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);
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);
2 Answers
Reset to default 13Not 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.
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.