Flickr Uploadr: Improving Browser-based File Uploads with YUI Uploader
Traditionally, file uploading in the browser has been awkward, slow and error-prone. File selection is done one at a time and monitoring progress of the upload is difficult. There are no simple callbacks for total bytes, progress, error handling and so on, restricting the developer's ability to provide meaningful messaging on the UI end.
ExternalInterface API, introduced with Flash 8. Several projects have implemented uploaders based on this approach, including the YUI Uploader control and SWFUpload among others. While developing against
Building an effective upload UI
On Flickr, we implemented a simple large "Choose photos and videos" link which when clicked, opens a multi-select-capable file-selection dialog driven by the YUI Uploader (which requires Flash 9). YUI Uploader provides file metadata via
fileSelect event callbacks after files are selected, at which point the file list and UI can be updated. The user can add and remove files as they like according to business logic, configure upload options and so on.
Beginning the Upload
During file upload, the
uploadProgress event fires regularly, providing the file ID, bytes uploaded and total bytes for each file. This data can be reflected as a progress bar, a percentage value or raw bytes depending on your UI.
Flickr Uploadr screencast from designingwebinterfaces on Flickr.
Connection Error Handling
If a file upload fails due to a connection or IO error from Flash, the
uploadError event will fire so you can attempt to gracefully recover by retrying the upload of that file. Another safeguard is to implement a basic timeout such that if a file upload "hangs" for too long without a reported error (e.g., 2 minutes passes without an
uploadProgress event), the file upload can be aborted.
File Upload Response Handling
uploadCompleteData event. Photos are processed asynchronously post-upload in Flickr's case, so a processing ticket ID is provided in the upload response. The ticket ID is then polled via API calls until a success/fail result is ultimately returned after server-side processing.
Uploader Start-Up Handling
YUI Uploader handles the creation and writing out of the Flash object and its initialization process. Once the control has loaded, the
contentReady event fires and the file selection process can begin. It is worth considering displaying some sort of "loading" element in your UI, in case the user wants to "choose files" before the control has initialized. In Flickr's case, we show a small animation next to the "Choose photos and videos" link to indicate a loading state, as well as greying out the text itself.
try...catch block in the
Special Casing: Handling Flash 10 Security Restrictions
To keep the user experience consistent on Flickr where an HTML link could trigger the selection dialog, we made the Flash movie transparent and overlaid it on top of the HTML link. Thus, the Flash movie captures the click and the selection dialog works as expected. One might call this a legitimate, local form of clickjacking.
If repositioning the Flash movie is undesirable in your use case, another option is to render the link, text or button UI within the Flash movie itself and show the movie as a normal inline element.
Should I Use This?
While there are some notable technical considerations associated with developing a Flash-based uploader UI — such as initialization and error handling — as with most nifty/shiny web things, the technical complexity of the implementation rests solely with the developer. Once the application logic has been implemented by the developer and integrated with YUI Uploader, the end result is an upload experience that is consistently faster, more convenient, efficient and more robust to the end user.