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!

Sari

I'm not quite sure I understand you. You can't upload a file to a server offline. Period. THe demo you linked to must be holding onto the file and waiting for a connection, but there is no magical way to get around being offline. – Aureolin

@RaymondCamden - that is exactly what I was looking for - hold the file (or contents of it) somewhere until the connection becomes available again. I am writing an "occasionally connected" app, which cannot rely on the connection to be up at all times. It 'caches' unsynched records in HTML5 local storage and synchronizes them with the server whenever the connection is available. I was just wondering how this can be accomplished with files. – Sari

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.

Sari

More details would be handy. This SO question covers images but it should serve as a good example of doing what is roughly described in this answer. – Unbroken

Hi @insiderpro so you save images to localstorage and how do you push them to server later on? As base64? 10x – Lucinalucinda

@Bill, yes, I push them to the server as base64 strings. – Sari

Hi @insiderpro thanks. Can you share some example on how to convert to base 64? – Lucinalucinda

@Bill, my solution is a kiosk, so I control which browser is used. This may or may not be compatible with all browsers. <input type="file" id="myfile" /> <script> function readImage(input) { if ( input.files && input.files[0] ) { var FR= new FileReader(); FR.onload = function(e) { $('#job-thumb').attr('src',e.target.result ); $('#job-thumb').attr('data-mime',e.target.result ); }; FR.readAsDataURL( input.files[0] ); } } $("#myfile").change(function(){ readImage(this); }); </script> – Sari

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.

Hanaper

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/

Gait