Uploading - PHP

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 ;

                     file.upload(uploadURL);

                     return;

                    }    

   }

  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.