HTML5 FileSystem API Android Chrome access to sdcard

Question

I am trying to create an HTML5 Application that is able to access a large amount of files. Therefore I looked at the FileSystem API to be able to read files from local filesystem.

I did a PoC using phonegap File API, and all worked as expected, I was able to produce similar results using the FileSystem API on Chrome Desktop...

However I am faced with a serious issue, while I can access my filesystem in Desktop, I can't access sdcard from Android Chrome. I tried to use this demo:

http://html5-demos.appspot.com/static/filesystem/filer.js/demos/index.html

I can select files from my local system in desktop: My Pictures, etc... But I can't do the same with Android Chrome

How can i access the device filesystem /sdcard in Android Chrome?

Answer 1

From this article on HTML5 Rocks:

It's important to remember that this file system is sandboxed, meaning one web app cannot access another app's files. This also means you cannot read/write files to an arbitrary folder on the user's hard drive (for example My Pictures, My Documents, etc.).

The FileSystem API was designed to allow your app to create and manipulate files which will persist between usages of your application. It cannot be used to expose arbitrary files from outside of it's sandbox.

Alternatively, the File API can be used to read, though not modify, files from the entire system. However, File API cannot be used to read arbitrary files on the system. It's usage is based on HTMLs <input type=file> tag, where the user must explicitly input the File to be read.

The above applies to an app running in Android Chrome the same as it does to Desktop Chrome, so you're out of luck unless the user is willing to use the input to grant access to the files you desire. However, you mentioned you also attempted a PoC using PhoneGap. The PhoneGap File API, though mostly acting as a wrapper around the HTML5 implementation, has some subtle differences, mainly in that it does allow for access to arbitrary files on the SD card. When using the API call window.requestFileSystem(), your success callback will have one argument, a FileSystem object, where the root property is a reference to the /sdcard folder. This can be used to traverse your sdcard and create FileReaders and FileWriters anywhere within.