Fluid Uploader Component


What is the Uploader?

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?

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


  • 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.

\[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.



Context and Scenarios

Storyboards with Scenarios

Design Pattern

Functional Requirements

  • none at the moment.

User Testing

Story Cards

  • none at the moment.

User Modeling

  • none at the moment.

Important Notes for Developers




Roadmap, Known issues, and Task List