How can I locally store file field selections in the context of an offline web app?

Question

I am developing an HTML5 offline-enabled web app which collects several form fields and multiple files (usually images) from users. We have a need to allow these users to select photos to upload before they can actually be uploaded, perhaps while they are still offline. When they go online, the form can be submitted and files will be uploaded.

How can I save this information? The files will be too large to store directly in localStorage. Can I use localStorage to instead store some kind of reference to the file, then recall it later for upload? Can I use the application cache somehow?

Answer 1

The FileReader API is for your friend.

With this, you can store the img src urls and later you can upload these images :)