With over seven billion photos uploaded since day one, it’s safe to say that uploading is an important part of the Flickr experience.
There are numerous ways to get photos onto Flickr, but the native web-based one at
flickr.com/photos/upload/ is especially important as it typically accounts for a majority of uploads to the site.
A brief history of Flickr “Web Uploadrs”
Earlier versions of Flickr’s web-based upload UI used a simple
<form> with six file inputs, and no more. As the site grew in scale, the native web upload experience had to scale to match. In early 2008, an HTML/Flash hybrid upgrade added support for batch file selection, allowing up to several gigabytes of files to be uploaded in one session. This was a much-needed step in the right direction.
The “flashy” uploader does one thing – sending lots of files – fast, and reliably. However, it was not designed to tackle the other tasks one often performs on photos including adding and editing of metadata, sorting and organizing. As a result, “upload and organize” has traditionally been reinforced as two separate actions on Flickr when using the web-based UI.
The new (mostly-HTML5-based) shiny
Thanks to HTML5-based features in newer browsers, we have been able to build a new uploader that’s pretty slick, and is more desktop application-like than ever before; it brings us closer to the idea of a one-stop “upload and organize” experience. At the same time, the UI also retains common web conventions and has a distinct Flickr feel to it. We think the result is a pretty good mix, combining some of the best parts of both.
As feedback from a group of beta testers have confirmed, it can also be deceivingly fast.
The new Flickr Web Uploader. It’s powerful, it’s got a dark background, and it’s fast.
Features: An Overview
Here are a few fun things the new uploader does:
Drag and drop batches of files from your OS. Where present and supported, EXIF thumbnails are shown in the UI almost immediately.
Fluid photo “grid” shows photo thumbnails, allows larger, lightbox-style previews, inline editing of description/title and rotation.
Mouse and keyboard-based grid selection and rearrange functionality similar to that of desktops.
“Editor panel” shows state of current selection, provides powerful batch editing features (title + description, adding of tags, people, sets, license, privacy etc.)
“Info” mode shows overlay icons on grid items, allowing for a quick overview of pending edits (privacy, people, tags etc.)
Auto-retry and recovery cases for dropped / lost connection cases
A small book could probably be written on the process, prototypes and technology decisions made during the development of this uploader, but we’ll save the gory details for a couple of in-depth blog posts which will highlight specific parts of the UI. In the meantime, here are some notes on the tech used:
HTML5 File APIs
Modern browser file APIs make up the core of file handling functionality, including drag-and-dropping of files right into the browser.
FileReader-type APIs allow access to data from disk, enabling things like EXIF thumbnail parsing and retrieval where supported. EXIF parsing is almost instantaneous and thumbnails are hugely valuable, of course, in prompting users’ editing decisions.
(For browsers without the relevant file APIs, a Flash-based fallback is used in which case file drag-and-drop is not supported, and EXIF thumb previews are not implemented.)
box-shadoware also featured nicely in this new design, alongside visual
transformeffects such as
scale. Eagle-eyed users of newer Webkit builds such as Chrome Canary may even see a little use of
blurhere and there.
While triggering transitions and/or transforms can be a little quirky depending on the current “state” of the element (for example, an element just added to the DOM may need a moment to settle and be rendered before transitioning,) the advantage of using CSS vs. JS for “enhancement”-style UI effects like these is absolutely clear.
A sneak peek: Screencast (Beta Version)
At time of writing, the new uploader is being gradually rolled out to the masses. For those who haven’t seen it yet, here’s a demo screencast of an earlier beta version showing some of the interactions for common upload and editing use cases. (Best viewed full-screen, and with “HD” on.) The video gives an idea of what the experience is like, but it’s best seen in person. We’ve really had a lot of fun building this one.
[flickr video=6928227556 show_info=true secret=11b73352d1 w=500 h=281]