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

Listening for Upload Events - 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



Although we have not initiated the upload to the server, we need to tell Flex what to do when certain things happen in the upload process.  The next important block of code in our uploadNext method is where we assign event listeners to our file reference. 

// add event listeners

file.addEventListener(Event.COMPLETE, uploadComplete);

file.addEventListener(ProgressEvent.PROGRESS, uploadProgress);

file.addEventListener(IOErrorEvent.IO_ERROR, uploadError);

Here we are assigning the uploadCompete, uploadProgress, and uploadError methods to events of upload complete, upload progress and upload error, respectively.  We will talk more about these in a bit.   For now, let's get the upload started.  

Kicking Off the Upload:

Here are the last few lines of our method:

// generate an ID for this upload

o.uploadId=Math.round(Math.random() * (5000 - 1000));


// upload the file

uploadURL.url = uploadPath + o.uploadId ;


One of the main goals of this application is to get a preview of the image after its been uploaded.  To implement this, we are going to use a simple method of sending an id number to the server along with the file.  We don't need to be too strict at this point, so a random number will suffice as an id.  For a real world application you'll want to use a more defined and secure method. To generate our id we use the Math.round method as shown above.  We append the id to our upload URL by appending it to the url property of the uploadURL object.

The uploadURL object is a required parameter of the upload method of the file object.  The best way to initialize this value is to create a constant, like so:

// Constants

public const imageUrl:String = "http://dev/flexFiles/";

public const uploadPath:String = "http://dev/flexUploader.php?id=";

Here is how we define uploadURL:

private var uploadURL:URLRequest;

and we assign it a value in out init method:

// set the upload URL

uploadURL = new URLRequest();

For each file being uploaded, we append our random number to the uploadPath string and set the uploadURL.url property to this value:

uploadURL.url = uploadPath + o.uploadId ; // http://myserver.com/flexUpload.php?id=123

When the server receives the id (via the GET superglobal), it renames the file using this number, thereby making it identifying to our application. Again, this is a simple demonstrative method of tracking uploads.  You should not use this method in a production environment. 

Finally, kick off the upload process with:


From this point on, we must rely on messages sent from Flex to tell us the progress of the upload, whether the upload is complete, or if there was a problem with the upload.  We use our listener functions as assigned above to take the appropriate action.

Step 3: Display the progress of the uploading file.  As the file is uploading, our uploadProgress method will be called.  Here is the code:

private function uploadProgress(event:ProgressEvent):void{

    currentFile.progress = event.bytesLoaded + " of " + event.bytesTotal;



This method is pretty straightforward.  We are using our currentFile reference to set the progress property to the number of bytes uploaded.  The event passed to us contains this information.  We make sure the DataGrid is updated by calling the dataProviders itemUpdated method.  The uploadProgress method can be called several times during the upload process.

Step 4. Once the file upload is complete, display the preview  image and return to Step 1.  Once the upload of our file is compete, our uploadComplete method will be called.  Here is the code:

private function uploadComplete(event:Event):void{

    // Mark the upload as completed

    currentFile.progress="Complete: " + currentFile.progress;

    // set the uploaded image src

    currentFile.preview=imageUrl + 

                              currentFile.uploadId + "_" +


    // find the next upload



This method first updates the status.  It prepends the byte count with the word "Complete:".  Now that the upload is complete, the image is available for display.  We can simply set the source of our dropIn itemRender to the path to the image, which we also defined as a constant:

public const imageUrl:String = "http://dev/flexFiles/";

This portion of our application requires a particular configuration on the web server.  In particular, our uploaded files must be available in the flexFiles directory.  Also, the server must save the files in this directory with the id pre-pended to it.  I'll included the PHP upload script below.

Here is what a completed upload looks like:


>>> 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: