Upload

This Design is Still In Progress

This pattern is still a work in progress, and is actively being worked on. {} indicates text from the drag and drop pattern which is just meant to be a placeholder. While discussion and comments are welcome, please treat this material as such.

Problem Summary

The user needs a way to upload a single or multiple files within their current context.

Solution

> > >

Provide user access to browse files in an external file manager and upload one or multiples files at once into their current context.

Use When

The user needs to bring new files into their current context.

Why

Avoiding context switching. Users typically upload files while in the middle of another workflow. This pattern allows them to remain in their current context while quickly adding files.
Allowing the user to add files in a non-linear workflow matches their workflow as they decide which files to upload.
Allowing the user to choose multiple files in one action is more efficient than forcing them to browse separately for each file.
Allowing the user to monitor the upload progress and get confirmation upon completion.
Avoiding sending the user to a new page for uploading creates a more seamless user experience.

How

Allow users to browse files on their computer and upload them into their current context.
Allow users to choose a single or multiple files from a single location through shortcut keys (shift, ctrl or apple).
Allow users to remove selected files from the upload queue.
Provide feedback about which files have been chosen before upload is started.
Allow additional files to be added to the upload queue so they can add files from different locations in one workflow.
Allow users to pause the upload
Provide a progress indicator so users are aware how long the upload will take.
Give users feedback about which files have been uploaded.

Accessibility

Provide keyboard-only equivalents of mouse-based actions. Ensure that every point of interaction with the file upload has a keyboard equivalent or accessible by using the keyboard. This includes any pop-up windows for file browsing.
Instructions for keyboard-only interaction. Instructions for keyboard-only interaction should be required if the upload controls are not self-documenting. These instructions can be conveyed by using insightful labels for interface elements, using a tool-tip or long description, or by having context sensitive help near the controls.
Feedback during upload process. During the process of uploading a file across a network connection, accessible status feedback should be provided to the user. This is particularly relevant in situations where the upload operation will take a while to complete. In the case of a user with visibility concerns, the feedback should be in plain text so assistive technologies can interpret the information or adaptive techniques can be used such as the applying of personal style sheets.
Outline the upload procedure to give context. Consider briefly outlining the upload procedure to give users of assistive technologies context for the file upload controls / interaction points. Without such description, a textfield with an associated browse button may have little context.
Feedback after upload process. Once the uploading of the file is complete, feedback should be provided prompting the user what they can do next.
Use WAI-ARIA Roles to describe the roles of the different interface components. This is particularly important for controls that are implemented in a non-standard manner but functionally similar to a standard action. For instance, if an image is used for the upload trigger instead of a standard form button, the ARIA role button should be used to describe the functionality of that image.
- Examples: status role for feedback messages, button role for the upload button, .
- For more information on WAI-ARIA, see this resource.

Examples

Flickr.com

> > >

drop.io

> >

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.