Menu
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!
786
Offline web applications are available through the new HTML Offline Web Application API, also known as HTML Application Cache. Beyond simply serving pages to the user when an Internet connection is unavailable, often an offline application requires storage of user's information.
Of course, you can't. But you can download when you're online. And that's how HTML5 offline applications work. At its simplest, an offline web application is a list of URL s — HTML , CSS , JavaScript, images, or any other kind of resource.
HTML5 Upload is a file upload app to upload images, documents and files using Ajax. HTML5 File Upload plug-in supports multiple file selection, drag & drop, progress bar, auto file upload, file input validation and preview images. Plug-in is developed using HTML5, jQuery, mustache templates and Bootstrap 3.0 framework.
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.
61
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
