| Warning | ||
|---|---|---|
| ||
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
buttonshould be used to describe the functionality of that image.- Examples:
statusrole for feedback messages,buttonrole for the upload button, . - For more information on WAI-ARIA, see this resource.
- Examples:
Examples
Flickr.com
> 
> 
> 
drop.io
> 
> 
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
...
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
...
- 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.
Related Patterns
"Extras on Demand" Multi-Upload
References
Standard HTTP Upload
...