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

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



Now that we have all of the information needed to upload our files, we can begin the process of uploading.  So far, in our application we've used the FileReferenceList to gather all the files selected by the user.  To actually upload the files we will need to use the FileReference class.  Although we can retrieve a list of files from the user, we still must upload them one at a time.

We must also consider the state of each file and code our upload application so that it knows when one upload is complete and to start a new one. As we are uploading each file we will need to present the progress to the user.  In short, there are a lot of  details to track.  With that said, a good starting place would be to talk about the alogrithm we intend to use.

Step 1: Find a file that needs to be uploaded.  In this step, we will traverse our uploadQueue ArrayCollection, searching for a fileRef that is ready to be uploaded.  We can use the "progress" property of the object to determine if the object is ready.  The "progress" property is set to "Ready" for all files before the upload starts.  If no items are found with a progress of "Ready," we simply do nothing.    

Step 2: Initiate the upload and wait.  Once an item is found to be ready to upload, start the upload.  To do this we will use the fileReference of the file and call its upload method.  Recall that the FileRefence object for each selected file is a property of the ArrayCollection item.  We can simply trigger the upload by calling the upload method of the fileReference.  Before we can do that, however, we need to examine more logic.

So far we've kept the code simple, but here is where things get a little more complicated.  Let's talk about what happens when the user clicks the "Start Upload" button.  Here is a method called uploadNextFile(), which takes care of much of the logic involved in initiating uploads:

private function uploadNextFile():void{

   var file:FileReference;


   // get the next file from the queue

   for each(var o:Object in uploadQueue){



                    // if we find a ready status, then start the upload

                    if (o.progress=="Ready"){

                     // save the current object for updating

                     currentFile= o;


                     // update the progress

                     o.progress="Initializing Upload";

                     uploadQueue.itemUpdated(currentFile); // force a refresh


                     // grab the file reference

                     file = o.fileRef;


                     // add event listeners

                     file.addEventListener(Event.COMPLETE, uploadComplete);

                     file.addEventListener(ProgressEvent.PROGRESS, uploadProgress);

                     file.addEventListener(IOErrorEvent.IO_ERROR, uploadError);


                        // generate an ID for this upload

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


                     // upload the file

                     uploadURL.url = uploadPath + o.uploadId ;








  uploadQueue.itemUpdated(currentFile); // force a refresh


We start this function by declaring "file," which is our FileReference.  We will use this reference to point to the fileReference of an item of the uploadQueue ArrayCollection.

At the heart of this function is the for each loop, which iterates over all the items in our collection.  For every item in the collection we check for the value of progress.  If the progress is "Ready," we know we can begin the upload process for this item.  If the progress is not "Ready," we just iterate to the next item.

If the current item is "Ready," we set a variable called currentFile to point to the item currently being uploaded.  This will make it easier for other parts of the application to directly address the properties (i.e. upload progress, image preview) of the item being uploaded.  We then set the progress of the item to "Initializing," which the following code does:

// update the progress

o.progress="Initializing Upload";

uploadQueue.itemUpdated(currentFile); // force a refresh

The above code requires a bit of explanation.  Because we are updating an ArrayCollection which is bound to a DataGrid, we need to tell Flex that the ArrayCollection has been updated.  This will cause the DataGrid to be visually updated, which is important, because we want to be sure the user sees the progress of the upload.   By using the itemUpdated method of the  uploadQueue object, we can trigger this update.            

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