Listening for Upload Events - PHP

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 ;

file.upload(uploadURL);

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:

file.upload(uploadURL);

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;

    uploadQueue.itemUpdated(currentFile);

}

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 + "_" +

                              currentFile.fileRef.name;

    // find the next upload

    uploadNextFile();

}

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: