This documentation refers to version 0.5 of the Uploader code. For documentation related trunk, please see Uploader Tutorial
This page will walk you through an example of adding the Fluid Uploader component to your application.
This tutorial assumes that:
- you are familiar with what the Uploader is and does
- now you just want to know how to add it to your file.
In order to test with the Uploader on a local file system, you will need to make modifications to your Flash settings. Please see Enabling Uploader on Local File Systems for instructions.
Tutorial: How to Use the Uploader
Suppose you are developing a content management system that will allow users to upload various types of files. This tutorial will show you how to use the Fluid Uploader to provide your users with easy-to-use multiple file upload capability.
There are four basic steps to adding the Uploader to your application:
- Step 0: Download and install the Fluid Infusion library
- Step 1: Prepare your markup
- Step 2: Write the script
- Step 3: Add the script to your HTML
- Step 4: Apply styles
The rest of this tutorial will explain each of these steps in detail.
Step 0: Download and install the Fluid Infusion library
- Download a copy of the Fluid Infusion component library from:
You only really need the "Minified deployment package," but if you want to actually look at the code, you should download the "Source package."
- Unpack the zip file you just downloaded, and place the resulting folder somewhere convenient for your development purposes.
The folder will have the release number in it's name (e.g.
fluid-0.4/). The rest of this tutorial will use
fluid-0.4in its examples, but if you downloaded a different version, you'll have to adjust.
Step 1: Prepare your markup
Let's assume that you're starting with an HTML file, say
myapp.html, that will present the user with a user interface for uploading files. This file will have to include the necessary markup for the Uploader interface.
To embed the Uploader into your file, copy and paste the markup below into your file where you want the Uploader to appear:
This template contains all of the elements, IDs and class attributes needed by the Uploader. Combined with the Uploader's style sheets (discussed in Step 3), this markup will display the Uploader dialog in your page.
Step 2: Write the script
You'll need to create a file, say
upload.js, to contain your initialization script - the script you write to apply the Uploader to your markup.
In this file, write a function that calls the Uploader constructor:
This function passes three required parameters to the Uploader constructor:
- The string ID of the container element (
- The URL of the application that files should be uploaded to (
- The URL to the Flash object used by the Uploader (
Those last two parameters warrant a bit more explanation:
When your application is live, the Uploader will need to know just where to upload the files to. This parameter (
uploadURL) should reference the server-side application that can accept the uploaded files and process them accordingly.
For testing purposes (and for the purposes of this tutorial), you probably don't want to be actually uploading files to a server. If this parameter is left blank (i.e. an empty string), then the Uploader will operate in a 'debug' mode, and no files will be transferred anywhere.
The Uploader uses a Flash module called SWFUpload (filename
swfUpload_f9.swf) for the actual business of talking to the server. This module is included in the Fluid Infusion package, and will be deployed if you use the
war file in the bundle. This URL must reference the location of the
For testing purposes (and for the purposes of this tutorial), you likely don't have the files deployed to a server, so this URL must be a relative URL to the current location of the file.
NOTE: If the
.swf file is on your local file system, you will need to make modifications to your Flash plugin's security settings. See Enabling Uploader on Local File Systems for instructions.
Step 3: Add the script to your HTML
You'll need to add your initialization script, along with the Fluid library and Uploader style sheets, to you HTML file, as shown below:
NOTE that the
Fluid-all.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:
Fluid-all.js file has everything you need.
That's it! That's all you need to do to add the Uploader to your document.