Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Fluid Uploader Component

Overview

What is the Uploader?

Section
Column
width65%
Excerpt

The Uploader is a file-upload component that supports multi-file uploads, and allows the user to queue files, and start, pause, and resume the upload.

What problem are we solving?

Section
Column
width50%
Panel
borderColor#CCC
bgColor#FFF

1. Problem

Problem Statement: Currently most web applications use the standard http file browse and upload service provided with the <input type="file"> form field.

Issues:

  • Only one file can be selected at a time for upload.
  • Interface is inconsistent from browser to browser even down to the labels on the browse button.
  • The application can not specify the file type or types that are accepted in the current context.
  • The browser does not provide meaningful or consistent feedback on the upload process.

A number of web applications get around the standard browse and upload experience by using Flash or Java in the browser, or creating stand-alone desktop interfaces to handle file uploading. Some of these solutions work very well but do not feel integrated with the application context, and they are difficult for the developers to modify or integrate with their applications.

How are we meeting the needs?

Uploader Specification
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.

Wiki Markup
\[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.\]

Features of the Fluid Upload component:

  • The user can select multiple files for upload using a single OS-specific file open dialog.
  • The application can specify which file types are accepted.
    • The Uploader does not validate that the file actually matches the file type, that must be done on the back end.
  • The Uploader allows the user to queue files, and start, pause, and resume the upload.
  • The Uploader provides complete progress information back to the user.
  • The user interface is completely customizable in HTML. With the exception being the OS specific file open dialog.
Column
width35%
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minlevel2

Screenshots

Image Removed Image Removed

Section
Panel
borderColor#CCC
bgColor#FFF

2. Users

Catalina and Christy are some of the users whose needs we primarily considered when designing the Uploader.

Fluid Personas are a collection of various types of important users whose needs we need to consider throughout the design process.

Panel
borderColor#CCC
bgColor#FFF

3. Users' needs

Contexts of Use: Where in the systems we support is an Uploader being used currently?

Functional Requirements: What use cases does the Uploader component support?

Primary & Secondary Scenarios: In what scenarios would the Uploader be used?

Column
width50%

Wireframes

Context and Scenarios

Storyboards with Scenarios
Panel
bgColorborderColorwhite#CCC
titleBGColorbgColor#c1b7c3
titleInteraction Design
borderStylesolid
#FFF

4. Solution

Wireframes: What does the Uploader look like and how does it behave?

Anchor
storyboards
storyboards
Storyboards: How, when, and where would the user use an Uploader?

Design Pattern

Functional Requirements

  • none at the moment.

User Testing

Comprehensive File Upload Design Pattern: Design advice for performing a "comprehensive" (complex) file upload.

Panel
borderColor#CCC
bgColor#FFF

5. Uploader User Testing

Uploader User Testing: Summary of all user testing performed on the Uploader component.

User Testing Protocol: Describes how the user testing of the Uploader will be carried out.

Story Cards

  • none at the moment.

User Modeling

  • none at the moment.
Column
width50%
Panel
bgColorwhite
titleBGColor#c1b7c3
titleTechnical Information
borderStylesolid

Important Notes for Developers

API

Integration

Demos

Roadmap, Known issues, and Task List

...

User Testing Results: Describes how the users interacted with the Uploader prototype and what improvements can be made.

Panel
borderColor#CCC
bgColor#FFF

6. Preparing for Implementation

Storycards: Decomposes the Uploader into small implementable chunks

Functional Specification: Development specification containing interaction details such as "interesting moments."