Announcing the Mozilla 2009 Design Challenge: SxSW Edition

Chris Beard

22 responses

Ever made a website that requires a file to be uploaded? Then you know how much that file upload control sucks.

Image of file upload widget
This sucks.

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. Ideally, the browser should make it painless to get files from the desktop to the cloud.

There has to be an easier way. Here are two ways for you to make a difference:

  1. Post an idea anywhere and Tweet its URL to mozconcept any time before the party (see below). The idea can be a mock-up, a prototype, some words, a napkin sketch, a video, anything.
  2. Join the Mozilla Labs team at SxSW as we discuss ideas and mock-ups to replace or augment Firefox’s current built-in file uploader. Come take part in the conversation and enjoy some refreshments (read: beer & grub). Join the inventor of Javascript, the lead architect of Ubiquity, the creator of jQuery, and others to discuss how you can prototype your ideas. Expect the usual Firefox swag, some prizes, and merriment.

    Moonshine Patio Bar & Grill
    303 Red River St
    Austin, TX 78701
    Time: 4:30 – 6:30 p.m.
    March 16, 2009

If you’re looking for inspiration for how to solve the file upload problem, check out Jesse Ruderman’s recent blog post on the topic.

We’re looking forward to seeing your ideas!

The Mozilla Labs Team

22 responses

  1. ejensen99999 wrote on :

    This problem has already been solved – it’s called an FTP client. Now if it could be integrated into a web browser it would help but would present some interesting security problems and race conditions.

  2. ;Op wrote on :

    Suggestions to enhance file uploads in browser
    Appart from the drag-and-drop and progress bar already requested by many, here are two suggestions that I strongly recommend:

    1. Being able to upload a file using HTTP PUT method. This is the more efficient way from the server side (no need to parse multipart separators), and probably from the client side (no need to store the file in RAM). I guess this could simply be done by allowing to have the method=”put” attribute to the HTML form. Then each form input would be sent in a dedicated PUT request, with the field name appended to the action URL, and the field value as the sole request body. (similarly, i would like to be able to trigger DELETE request from HTML, but this is out of scope of this discussion)

    2. Allow a file input to upload multiple files: instead of holding a single file path, the input value would hold a list of file paths. This could be done by adding a new “fileset” input type.

    I understand that these suggestions impact the HTML, and hence raise a compliance/interoperability issue. But I would appreciate Mozilla to prototype such solutions, and promote them to w3c.

  3. Zéfling wrote on :

    Is it relating to this bug?
    https://bugzilla.mozilla.org/show_bug.cgi?id=63687

  4. Zéfling wrote on :

    Is this relating to this bug?
    https://bugzilla.mozilla.org/show_bug.cgi?id=63687

  5. Brad wrote on :

    You should really raise the steaks a lil. Giving out free t-shirts for ideas Mozilla can profit from is just… somehow wrong. At least give the creatives a freggin iPod.

  6. Mike Beltzner wrote on :

    The prizes are love, adoration, and your name in about:credits.

  7. Craig Moser wrote on :

    Take a look at how GMail recently addressed the issue. You can now multi-select files to attach and user is presented w/ progress bars as files are uploaded in the bkgrd. Not perfect, but pretty slick & easy.

  8. prizes wrote on :

    what are the fucking prizes? do you expect us to solve this shit for free?

  9. M. Hageman wrote on :

    Would it be possible for the browser to put a file submit in a different “thread” so to speak? The only real problem I encounter in different solutions to the problems described above is that once a page is closed, it’s HTTP POST or GET actions are also lost.

    It would be nice to extend the file input element (widget) with several options:

    * Multiple file select. When only one file is selected, the filename.ext is shown (not the entire path, which is useless information anyway). When multiple files are selected, these will be shown as comma separated lists of filename.ext.

    * Each file (displayed as filename.ext) inside the file input box would be clickable, and individually adjustable by doubleclicking on said file. Clicking the file would select it, and enable the user to remove that file from the upload.

    * Dragging one or multiple files to the file input box would add these files to that box.

    Having a status bar would be great, but it would also require some additional HTML attributes or even nested FORMS. Not standards compliant.

    However, if it’s possible to know for the browser when it’s uploading a file, it’s probably easiest to put every form submit inside a different thread, enabling the user to continue using his current browser window and tab to do whatever he wants. Whenever the browser submit is done, a notice would appear (e.g.: “Your form submission to labs.mozilla.com has been completed. Click here to continue.”)

    Clicking that notice would open the destination of that form in the current page. Middle-clicking would open that window in a new tab. Ctrl + clicking would open it in a new window.

    It would be a radically different approach to submitting forms, but it would never lock the user down in any possible way.

    It would also enable Mozilla (Firefox) to display a statusbar for each form submission in the bottom browser bar, or even in the current tab.

    Optionally, if you can handle each file input individually, add a small 2-pixel height status bar to each file input, spanning the entire width of said file input.

  10. voracity wrote on :

    For progress indication, something simple would be nice to begin with. For example, as the form data is being uploaded, two things should happen: 1) Fx status bar shows what percentage has been uploaded and 2) a javascript object is made available to the page (which remains alive until submission is complete and can optionally pause/stop before finalising form submission) that indicates the current percentage uploaded. This should be for *all* uploaded data, not just files.

    The problem often cited against doing things this kind of way is that the browser doesn’t know how much the server has *really* received. But it’s better to have a progress bar that is informative 99.99% of the time than to have no guidance at all 100% of the time. Server-side ACKs can be introduced in a later iteration quite easily.

  11. Lior wrote on :

    try a control which works like “Stacks” in apple’s dock . a little icon when you click on it your Home folder is open (please apply cool effect here) and then you have to just choose file from a icon-like set.

  12. Eroq wrote on :

    DragDropUpload extension seems to have stopped working on my machines this past week. This is very sad. Now, I am back to the old, very stupid way of uploading.

  13. Hmmmm wrote on :

    Photobucket.com offers a multi-file upload feature with a status meter. Javascript and/or Ajax is used for it.

    Probably not the solution this site is looking for as it still uses the sucky ‘browse’ buttons but it’s a step forward 😉

  14. Drew wrote on :

    Dragdropupload is great but Gmail just changed their file upload interface so that they don’t work together any longer.

  15. Samuel Santos wrote on :

    I would be very grateful if you can comment about Internationalization of the File Upload Form Field at http://www.samaxes.com/2009/01/27/internationalization-of-the-file-upload-form-field/. Thanks.

  16. watcher wrote on :

    @atul : Some people absolutely hate twitter and all people the tweet. It can be a real killer you know 🙂

    Interesting idea, but I want to be able to drag files from the downloads window to another folder. That would make my life easier than perusing this.

  17. Randy wrote on :

    Granted, the internet browser which is also a file browser is incredibly convenient for the end-user. But how do you get around the security problems that can cause? Wouldn’t this mean that the website scripts can access the local file system?

  18. atul wrote on :

    @Gerv: Yes, you can just post a link to your idea here in the comments. The reason Twitter is preferred is because not only is it public–like these comments–but it’s also a social network, so as soon as someone Tweets their idea @mozconcept, all their followers will immediately see it and check it out too, which increases the visibility of the design challenge and also kills two birds with one stone (publicly submitting an idea and sharing it with one’s friends).

    @Joe: Yes, Dragdropupload is great, but as Paul mentioned, there’s still more room for improvement. Progress indication is one, and there’s other things mentioned on Jesse Ruderman’s blog post that the addon doesn’t do. That said, I agree that at least the features of Dragdropupload should be considered for uplift into Firefox. 🙂

  19. Gervase Markham wrote on :

    Is it possible to submit ideas if you think Twitter is an enormous waste of time and so don’t use it? 🙂

  20. Paul Wuersig wrote on :

    I use a perfect little Add-on called “dragdropupload.” I can drag files onto the Browse button just fine! Still, the lack of a progress indicator is a bummer.

  21. Torley wrote on :

    This is brilliant to see. I’d like to see what creativity can help with this long-in-the-tooth problem!

  22. Joe wrote on :

    Are you aware of the Dragdropupload extension? it solves the drag drop problem and it fills multiple upload boxes. Maybe you could integrate it into firefox?

    https://addons.mozilla.org/en-US/firefox/addon/2190