Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section
Column
width60%

Uploader Overview

The Infusion Uploader provides an easy way for users to upload many files at once, providing useful feedback about the status and progress of each file along the way.

Uploader implements several different ways of to upload multiple files, including the new HTML 5 supported added in Infusion 1.3. With its built-in support for progressive enhancement, users will automatically receive a version of the Uploader best suited to the capabilities of their browsers. There are three different flavours of Uploader:

  1. Single file: delivered to browsers that don't support JavaScript, Flash or HTML 5
  2. Flash with SWFUpload: delivered to older browsers with JavaScript enabled (especially IE)
  3. HTML 5: the best and most widely-supported version of Uploader, suitable for modern browsers

The HTML 5 version of the Uploader will be delivered to modern, standards-compliant browsers, including:

  • Firefox 3.6 and higher
  • Safari 4 and higher
  • Google Chrome

Internet Explorer users will receive the Flash version of the Uploader. Due to limitations in Flash, this version of the Uploader provides a less polished user experience and limited support for accessibility. As a result, we encourage you and your users to upgrade to an HTML 5-compatible browser such as Firefox 3.6+, Safari 4+, or Chrome.

NOTE: If you will be testing the Flash version of the Uploader on a local file system, please see the #Important Notes for Developers below.

For more details on the Uploader design and design Process, see Uploader Design Overview.

Progressive Enhancement

The Uploader utilizes the concept of progressive enhancement. The goal is to ensure that the page is usable by the widest possible audience, even with old browsers or when JavaScript is turned off. This is done by specifying a regular file input element in the markup. When the Uploader is initialized, the Upload code will replace that element with the Fluid Uploader. As of Infusion 1.3, progressive enhancement will occur automatically by default. It can be overridden by choosing a specific upload strategy instead of using the fluid.uploader.progressiveStrategy.

Upload Strategy

The Infusion Uploader, like many Fluid components, is really one interface to a collection of components that work together to provide a unified user experience.

The Uploader provides a facade object, called a strategy, which represents the entire subsystem for a particular implementation of Uploader. There are currently two different strategies available to choose from:

  1. fluid.uploader.html5Strategy, which provides the modern HTML 5 implementation of Uploader
  2. fluid.uploader.swfUploadStrategy, which implements the legacy implementation of Uploader with Flash and SWFUpload

To support progressive enhancement, there is a third type of strategy, fluid.uploader.progressiveStrategy, which uses the new Infusion IoC - Inversion of Control System to deliver the best possible version of Uploader based on the capabilities of the user's browser.

The default strategy for Uploader is fluid.uploader.progressiveStrategy.

Upgrading

Upgrading from Infusion 1.2: The Uploader was substantially refactored for the Infusion 1.3 in order to support the new HTML 5 version. However, most users should be unaffected. All events, selectors, and classes remain compatible with previous versions. Since the Uploader's underlying structure has changed significantly, and support for Infusion's IoC System was introduced, several other configuration options have changed.

In order to ease the transition, we've provided a compatibility file that will automatically transform your options from the old format to the new when you invoke fluid.uploader(). This can be enabled simply by including the UploaderCompatibility-Infusion1.2.js file your page. If you're not using a custom build of Infusion, you will also need to include the framework's ModelTransformations.js file.

Upgrading from Infusion 0.8: The classnames used for selectors and styles in the Uploader were extensively refactored for Infusion 1.0. Please refer to the Tutorial - Uploader 1.0 Migration documentation before upgrading from Infusion 0.8.

Upgrading from Infusion 0.5: During Infusion 0.6, the Uploader API had a complete overhaul. Please refer to this document and the latest example code before upgrading from Infusion 0.5 or earlier.

Column
Panel
borderStyle
borderColor#321137
bgColor#fff
titleBGColor#aab597
borderStylesolid
titleStatussolid

This component is in Preview status

solid
Panel
borderStyle
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
Table of Contents
toc
maxLevel
maxLevel
5
minLevel25
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?borderStylesolid

Join the infusion-users mailing list and ask your questions there.

...