File uploads in HTML5 offline applications

Question

I am working on a Web based application which will potentially be used in environments with unstable Internet connection. I am implementing it as an HTML5 offline application that will utilize HTML5 local storage (actually jQuery plug-in jStorage). It's a data-entry driven app, so all new entries created while being offline are saved in local storage and will be synchronized later with the server when Internet connectivity is re-established. I almost got that working but now I am facing with a requirement when users will actually need to upload an image along with a data-entry submission.
I found this HTML5 API spec - http://www.w3.org/TR/file-upload/ which talks about file uploads and offline access. Before I go too deep into this - are there any wrappers around this functionality that would simplify this for me?
I also just found this article - http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/ which utilizes a publicly available TwitPic API and I wanted to get some professional feedback from people here.

Thank you!

Answer 1

I Know it's been a while since I asked this but I still see this question being favorited and upvoted, so I figured I'll share how I ended up solving this. In my case the files aren't that large so I simply decided to MIME encode them and then store the string in HTML5 localStorage. It works as a charm.

Answer 2

I had written an article some while ago on HTML5 file API - http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

Also refer the GitHub repo - https://github.com/mailru/FileAPI for advance controls.

Answer 3

I don't think localStorage will be the right answer here because localStorage saves strings only and has a 5 megabyte storage limit.

I suggest something like http://pouchdb.com

But if you insist on localStorage, then Mozilla Hacks has an article about storing images in localStorage: http://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

indexedDB might be a better place to store files: http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/