I’m currently developing a system where the user has to upload quite a lot of images. So we got our good old form there, some text fields and a file field that is used to pick the file to be transferred.

After clicking the submit button the browser uploads the form to the server and after that, the whole process starts over again. If you are on a slow internet connection this can be quite a pain since you’ll have to wait for the upload to finish … and meanwhile you’ll have forgotten what the next file you wanted to click was.

After reading a blog post by Felix Geisendörfer about a server side JavaScript implementation of a file uploader I got the idea about a client side version of the same thing. Ok, it’s not exactly the same thing but anyway, Felix’s post gave me that idea.

Now if we want to store our forms on the client’s browser we’re gonna need some storage. Luckily most modern browser have a feature called DOM storage which allows for saving  and retrieving of user data.

So my idea was, that instead of sending the post data to the server, we temporarily save it in the client’s DOM storage. Submitting hardly takes any time since no data is transferred yet. If the user feels he has submitted enough forms he can click on a “Submit all” button which then will batch upload all the data to the server.

This of course still takes the same time as before … but you can do something else meanwhile because the transfer will happen automatically in the background. This is not just limited to one page, you can use any form on your site. The FormQueue class will remember where the original post should have gone to and will upload to this address.

Another advantage would be, that even if you close the browser or accidentally surf to another page, the stored posts will still be there because the DOM storage is persistent, ie it survives even a browser crash.

There are a few downsides to this approach:

1. You cannot have any kind of server side input validation. If the server doesn’t like the image you picked it has no way of telling you about this (yet). This could probably be implemented.
2. So far it only works in Firefox 3.5 … yes, the other browsers know about DOM storage too but they are missing a vital thing: They cannot upload binary data (like images) via ajax, only plain text. I have no idea if there are any plans to introduce this feature, for IE you can probably expect it around 2015
3. Firefox imposes a 5 MB limit on the storage. This should be enough for quite a few images but no, you cannot queue up that 700MB movie file yet. I haven’t looked into this yet, but by using Google Gears as storage this limit could be pushed up to 2 GB.

But enough talking, have a look for yourself

I should probably note that I shamelessly used an uploader class by Ionut Gabriel Stan, it can be found here. The source code of the FormQueue class is here.

I’d be interested what you think about this? The limitation with the browsers aside I think that this can be quite helpful for improving the workflow on repetitive tasks.

Written by: flow

<-- Go back

This entry was posted on Wednesday, October 7th, 2009 at 5:29 pm and is filed under News. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.