Home arrow PHP arrow Page 2 - Building a Flex Multiple File Uploader with Image Preview

Selecting Files - PHP

As the Internet integrates itself more and more into our daily lives, we see the popularity of electronic media spread like a virus. Websites like Youtube and Flickr have had a great deal of success by primarily focusing on user-generated content. Because so many people are uploading media, making the process as easy as possible makes the most sense. Keeping reading to see how Flex can do this for you.

  1. Building a Flex Multiple File Uploader with Image Preview
  2. Selecting Files
  3. Getting the Files
  4. Uploading
  5. Listening for Upload Events
  6. Error Event
By: Keith Lee
Rating: starstarstarstarstar / 6
December 04, 2009

print this article



Flex makes the job of selecting single or multiple files easy.  Our aim here is to allow the user to click on the "Select Files" button and then select the files to upload.  Once the files are selected, the user can then use the "Start Upload" button to post the files to the server.

Let's start by getting the files from the user.  We will be using the FileReferenceList class to accomplish this task.  Alternatively, if we only wanted to upload a single file, we would use the FileReference class.  

The first step is importing the necessary code:

// Imports

import mx.events.ItemClickEvent;

import flash.net.FileReferenceList;

The ItemClickEvent was already added for the ButtonBar.  The "import FileReferenceList" statement now gives us the ability to instantiate the object we need to retrieve the list of files from the user.  The next step is declaring a FileReferenceObject to use.  We'll call this object uploadList.

// Properties

public var uploadList:FileReferenceList;

To create a new instance of this FileReferenceList, use the "new" operator like so:

// create an instance of the File Reference List

uploadList = new FileReferenceList();

To keep things nice and neat, I've created a method called "init" which is called once our application fires the creationComplete event.  Creating an init method is good for expandability.  I can now place any other initialization code in the same method.

The FileRefenceList class contains a method called browse, which will open a native File Dialog box and request that the user select mutilple files.  The dialog window is different for every operating system.  We can trigger this dialog in our buttonHandler method.  We already have a case for "Select Files" which will call 'uploadList.browse()'.  The browse method takes over from this point.  I'm developing with Microsoft Vista, which has the following look:


Specifying File Types

We can call the browse method as we did above with no parameters.  This tells the native file selection dialog to allow the user to select any files they wish.  This may be good in some cases, but there are times where we want only certain file types to be allowed.  To remedy this, the browse method takes a parameter that limits the file types which can be selected.

The parameter is an array that contains FileFilter Objects.  Here is how we would use this:

// create a fileFilter - class declaration

private var imageTypes:FileFilter;

// set the file filter type - jpg/png/gif - init method

imageTypes = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");


// upload - buttonHandler



For simplicity, I placed these lines of code in sequence.  As you will see from the final code below, they actually exist in different places.  Note here that I'm using the short form of an array [].

Calling browse and passing our array of fileFilters effectively removes all non jpg, png, and gif files from the file list.  

>>> More PHP Articles          >>> More By Keith Lee

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates


Dev Shed Tutorial Topics: