Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash ActionScript Uploading File - Display Upload File Progress to User

In previous Flash ActionScript uploading file tutorials, users do not have any idea of the upload progress. In other words, the user do not know the status of the upload, when the upload is completed. In this Flash Actionscript tutorial, the uploading progress is showing to user.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

This Flash ActionScript uploading file tutorial is actually same as AS downloading file tutorial.

Here's how Flash ActionScript shows the file downloading progress to user:

  • The FileReference object will dispatch a PROGRESS event when the file is downloading to user local computer.
  • The FileReference object will dispatch a COMPLETED event when the file download is completed.
Therefore we can use the PROGRESS event and COMPLETED event to add the Listener.

Flash ActionScript Codes:

// Set text field to empty
// This use to detect user select file or not
output_txt.text="";

 

// Create a new URLRequest instance sending data to "upload.php"
var myRequest:URLRequest = new URLRequest("upload.php");

 

// Create a new instance of the FileReference class to work with.
var myfileReference:FileReference = new FileReference();

 

// Listen to when Save button has been clicked on
myfileReference.addEventListener(Event.SELECT, fileSelected);

 

function fileSelected(evt:Event):void {

output_txt.text = "File selected upload: " + evt.target.name;
}

 

function browseFile (event:MouseEvent):void {

output2_txt.text = "";

 

// Use browse( ) method of a FileReference object to open a
// dialog box to browse local disks for a file.
myfileReference.browse();

}

 

// Hook up the button with the function browseFile
browse_btn.addEventListener(MouseEvent.CLICK, browseFile);

 

// Listen to the file downloading progress
myfileReference.addEventListener(ProgressEvent.PROGRESS, fileUploadProgress);

 

// Create a new URLRequest instance sending data to "upload.php"
var myRequest:URLRequest = new URLRequest("upload.php");

 

function fileUploadProgress(evt:ProgressEvent):void {

// Show file size
//output2_txt.text = "File size: " + evt.bytesTotal + " Bytes";

//Calculate the loading percentage
//Declare the loading percentage
var percent:Number = Math.round((evt.bytesLoaded/evt.bytesTotal) * 100);

//Display the loading percentage to visitors
output_txt.htmlText = "Downloading file.... " + String(percent) + "% loaded";

}

 

// Listen to when file downloading is completed
myfileReference.addEventListener(Event.COMPLETE, fileUploadCompleted);

function fileUploadCompleted(evt:Event):void {

output_txt.htmlText = output_txt.text + "<BR>" + "<font color='#ff0000'>FILE DOWNLOAD COMPLETED!</font>";

}


function uploadFile (event:MouseEvent):void {

// Reset the Alert text field to empty
output2_txt.text ="";

if (output_txt.text.length > 0) {

// Call the upload( ) method of FileReference object to upload a file
myfileReference.upload(myRequest);

} else {

// Alert user to select a file to upload
output2_txt.text = "Please browse for file to upload!";
}

}

// Hook up the button with the function browseFile
browse_btn.addEventListener(MouseEvent.CLICK, browseFile);

Download Flash Source File:

Flash Source File as3-upload-file-05.fla

Remarks:

This Flash ActionScript uploading file shows how to monitor upload files progress to user. You should modify the codes a bit to prevent user pressing the upload button again and again.