Some file upload ideas

I didn't manage to write down or even hear all of the suggestions that came up at today's design lunch, but these ideas appealed to me:

More options for file upload controls

We could attach a menu to each <input type="file">, containing commands like:

  • Paste as a text file
  • Take screenshot...
  • Enter path...
  • Choose file...

The "Paste" option should be able to accept text, images, and files.

The "Enter path..." option should support tab completion and tell you if the file doesn't exist. It could evolve into some kind of light, cross-platform file picker.

It would be really cool if this menu could include a list of files the user has touched recently. Both Windows and Mac OS X maintain global lists of "recent documents", and we could simply show items from these lists. Alternatively, we could use file system APIs to find out whenever a new file is created, but this is tricky because we want to include files that users created manually (e.g. by saving them in an other application or by specifying them as a target on a command line) but not files that are created in the background (e.g. logs and caches).

This could be a pane instead of a normal menu, creating room for previews (e.g. for "Paste") and hints like "or you can drag files here".

Remember file upload forms

When a form contains only a file upload control, Firefox could offer to let users upload additional files without visiting the page that contains the form:

  • Add an icon to the Firefox toolbar or the Mac OS X Dock that functions as a drop target.
  • Add to the menu that appears when you right-click a file in Explorer or Finder.
  • Add to the "Send To" menu on Windows.
  • Create a special folder, where all files saved to that folder get uploaded. The site's favicon could be used as a badge making the folder look special.
  • Add to the Services menu on Mac. This would let users add keyboard shortcuts to other applications to perform actions involving web sites!
  • Add a shell command, allowing power users to do things like "flickr *.png" or "hg diff | pastebin".

This approach may be limited by the fact that the destination is often not a service in general, but a specific person or bug report or forum thread.

Let sites offer files

More and more of users' data is in the cloud, and this includes the things they might want to "upload" to other sites. Let users move data from one site to another without dealing with the file system.

  • Whenever a site offers a download, instead of making the user pick a location, just put it in a temporary location represented as a "shelf". Once the file is on the shelf, it can be dragged to Finder or to another web site.
  • Let sites offer draggable objects that represent files, so users can drag from the site directly, skipping the "shelf" step.

7 Responses to “Some file upload ideas”

  1. Jesse Ruderman Says:

    Aza Raskin has offered his UI mockup skills to anyone interested in implementing some of these things ;)

  2. Colin Barrett Says:

    > We could attach a menu to each , containing commands

    Please don’t. Just use the standard system one.

    Instead, allow people to do things like drag & drop files into text fields or just paste images directly into the browser.

    Operating systems already have existing ways to move documents and text clippings around: the clipboard and drag & drop. Embrace these methods, don’t roll your own.

  3. dave Says:

    This is partly a combination of your 1st and 3rd points, and maybe only makes sense to geeks but…

    If I’m asked to upload something that is publicly available on the web, I should be able to just input the URL and have Firefox fetch it, then upload it in a single action.

    (Also the screenshot one seems like too specific overkill if you can already easily paste an image from the clipboard, or drag from the desktop)

  4. chaos8 Says:

    What about this bug? :-)

  5. Eric Shepherd Says:

    Being able to drag and drop files into the edit field asking for a file to upload would be really nice.

  6. Josh Says:

    One of the only things I really like about Windows (and one of the only things I miss when I’m working on a Mac) is that it has some of this built-in in a pretty neat way. In a file upload control, click browse or choose file or whatever; in the Windows file chooser dialog that comes up, type in (or paste) a URL in the “file name” field. Windows will automatically fetch the URL, download it into the temp folder, and upload it for you.

  7. Gerv Says:

    What would be cool is if a form could be marked as “accepting Zip files” in the HTML. Then, you could select multiple files in the filepicker and Firefox would zip them all up and send them. Is there a standards-compliant way we could do this using content types or something or would it require an HTML extension?

    Also, the file upload control should certainly be a drop target. And yes, you should be able to enter a URL and have Firefox fetch the URL and upload the resulting data in one smooth move. Re-enabling the typeable path via a menu item or hotkey would also be very good. And you should be able to press Ctrl-V when the control is highlighted and have it say “” in the field and upload the contents of the clipboard.

    Lots of possibilities :-)