Upload Design Pattern

Pattern Relocated

This design pattern has been moved to the Open Source Design Pattern Library

http://osdpl.fluidproject.org/content/file-upload

All future development and editing of this pattern should take place in the OSDPL.

To view the now-outdated wiki version of this pattern, see Version 38

The "Design Suggestions When Implementing the Uploader" section will remain here for now, until we find the proper place for it.

Related Fluid Components

Uploader

The Fluid Uploader uses an approach to browser-based file uploading used by Flickr and the YUI library. This technique uses a small Flash object, with no user-interface of its own, to call a standard OS file open dialog that allows the user to select multiple files, and then uses the same Flash object to manage the interaction with the server to provide good progress feedback to the user during the file upload.

Aside from the standard OS file dialog the interface presented to the user is done completely in HTML with Javascript talking to the SWF (Flash) object, giving the application developer much more control over the user experience.

[The Flash file upload library that we're using for the Fluid Uploader is the SWFupload library. http://www.swfupload.org From this library our component uses the Flash component and swfupload.js file which handles the communication between the swf and the UI.]

The Fluid Uploader uses an approach to browser-based file uploading used by Flickr and the YUI library.  This technique uses a small Flash object, with no user-interface of its own, to call a standard OS file open dialog that allows the user to select one or multiple files, and then uses the same Flash object to manage the interaction with the server to provide good progress feedback to the user during the file upload. This component provides a framework for file upload that supports all the visual cues specified in this pattern, keyboard access and automatic handling of some ARIA state changes. The first release is an implementation of this pattern. Future releases may include sub-patterns along with their implementation.

For more detailed information you can refer to design material on the wiki and the technical spec.

You can find more information about other Fluid components on the Components page.

Design Suggestions when implementing the Uploader

The Uploader component handles uploading file including choosing files, progress and status indicators and the ability to pause and resume uploads.  It's important to think about the context the uploader lives in.  Design decisions need to be made about how users get to the Uploader (ex. "add files" button) and what happens after the files have been uploaded (e.g. users are dropped back into original context or allowed to add metadata and tags to the files).  This section is meant to give design advice around these decisions.

  • Provide access to the Uploader from within the user's context.  An "Add files" button or link is an example.  The Uploader may be accessed in a new page or in a lightbox-style pop-up window (implemented post 0.3 beta release).
  • Provide users with immediate feedback about the files they have uploaded by making sure the files are in view when the user is taken back to their starting page (prior to uploading).  Also:
    • allow users to sort the new files in meaningful ways (for their context) to help them parse the files as efficiently as possible.
    • give users a way to easily remove files from the newly added list of files.