One of the things we do a lot of here is design and build web form based interfaces. We’ve done a lot of them over the years. In fact we’ve got a box full of half finished ones out the back. Back in the dark ages of the early 2000’s there was not an awful lot you could do with your web form to make it stand out from the crowd. Cross browser compatibility issues with CSS and Javascript put an end to those fun ideas.

How things have changed though; browsers have largely sorted their differences out and we’ve witnessed the birth of some super powerful Javascript libraries (our personal favourite is jQuery). All this power allows us to spice things up and make our web based interfaces behave a little more like their desktop brothers and sisters.

There are some things we don’t have control over though. Reasons include technical design limitations, security or plain and simple lack of foresight. One cross we’ve had to bear for a long time is that of the file upload form element. We’ve all used them plenty of times (which social site doesn’t encourage you to upload your latest beautiful picture) and I’m sure a lot of us have come to take them from granted. You can imagine our excitement then when we saw the Mozilla 2009 Design Challenge which is to come up with a new way of doing things.

Mozilla describe the current file upload widget problems so well …

“Why does it suck ? Because there’s no drag-and-drop; Flash or server-side hacking is required to provide any kind of progress indication; you can’t upload multiple files; if you know what you want to attach you have to navigate there again with the OS file picker; you can’t even enter a path into the widget because of security issues; and the list goes on.”

So if we could do anything, anything at all and forgetting any security or implementation issues(!) it would be this.

Our file upload widget would

1. Have a progress indicator. This must be accurate and reflect what is actually going on. None of your inaccurate Windows Vista indicator nonsense.
2. Be sensitive to drag and drop. Grab a file from somewhere and drop it straight on there. Once you’ve dropped it, the progress indicator kicks in and you are free to continue with the other form elements. (Similar to how gmail does attachments).
3. Menu driven browsing functionality. When you click ‘upload’ you should be given a small menu with the following options
   • File system access points. Go to a preconfigured point in the file system. Chances are you work from one of a few places, these points should be configurable and easy to get to.
   • File system filters. How about something that lets you only browse preconfigured groups. So images will contain *.jpg, *.gif etc. Documents will contain *.doc, *.pdf. There is also an ‘all’ option.
4. Generate the file to upload. Sometimes you might want to actually produce the file you want to upload as you are uploading it. An example would be grabbing the computers camera, taking a picture or a short video and then uploading. This should all be done seamlessly and effortlessly. A decent solution to this would enable developers to build web apps around this functionality alone. With a fast enough connection the whole process of recording, uploading and viewing AV files creates all kinds of possibilities. I’ll leave this for another post.

So what do you think ? Can you add to this list ?