File UploadsFlash 8 Specific

One of the largest demands from the Flash development community was a file system object that could be used for file uploading. When Macromedia developed Flash 8, they incorporated the fileReference object, which allows SWF files to access the file system of the user's machine. We will use this new object in our next, and final, example.

Example 7File Upload

In the following example, we will create a simple file upload utility. This utility will be composed of two parts: one Flash file that will access the file system and grab the file and one PHP page that will do the work of uploading said file. Create a new PHP file, save it as upload.php, and paste the following script inside:

 <?php if ($_FILES['Filedata']['name']) {     $uploadDir = "images/";     $uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);     move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile); } ?> 

This page is called under the pretense that we are passing it a file to upload that has been stored in the browser's temp directory. First it checks to see whether the file is there by testing the Boolean value of Filedata. Then we define the directory to upload to and define the file to upload. Finally, we move the file from the browser's temp directory to our directory on the server.

Now we can move on to the Flash.


Create a new Flash file and save it as fileUpload.fla.


Create a new layer in the timeline. Rename the top layer actions and rename the bottom layer content.


In the Content layer, create a new rectangle, make it a movie clip named rect_mc, and be sure that it is big enough to hold the following:

  • Textfield

  • Instance name name_txt

  • Button Component

  • Instance name browse_butn

  • Label Browse

  • Button Component

  • Instance name upload_butn

  • Label Upload


In the Actions layer, in frame 1, paste the following code:

 //import the FileReference Object import; //initial settings upload_butn.enabled = false; //the FileReference object var file_fr:FileReference = new FileReference(); //object for listening to for FileReference events var list_obj:Object = new Object(); list_obj.onSelect = function(){     upload_butn.enabled = true;     name_txt.text =; } list_obj.onComplete = function(){     name_txt.text = "All Done";     rec_mc.clear();     upload_butn.enabled = false; } list_obj.onProgress = function (bytesTotal, bytesLoaded){     var percent = bytesLoaded/file_fr.size;     drawRec(percent); } //if a user selects cancel list_obj.onCancel = function(){     name_txt.text = "Cancel was selected"; } //if there is an IO error list_obj.onIOError = function(fileRef){     name_txt.text = "IO error with " +; } //security error problem list_obj.onSecurityError = function(fileRef, error){     name_txt.text = "Security error with " + + ":" + error; } //httpError list_obj.onHTTPError = function(fileRef:FileReference, error:Number){     name_txt.text += "HTTP error: with " + + ":error #" + error; } //attach the listener file_fr.addListener(list_obj); //the event for the browse button browse_butn.clickHandler = function(){     file_fr.browse([{description: "JPEGs", extension: "*.JPG;*.jpg"}]); } //the event for the upload button upload_butn.clickHandler = function(){     file_fr.upload("upload.php");     rec_mc.fillColor = Math.random()*0x1000000; } //drawing the rectangle function drawRec (per){     rec_mc.clear();     rec_mc.lineStyle(0);     rec_mc.beginFill(rec_mc.fillColor, 70);     rec_mc.lineTo(per*rec_mc._width, 0);     rec_mc.lineT o(per*rec_mc._width, rec_mc._height);     rec_mc.lineTo(0, 30);     rec_mc.lineTo(0,0);     rec_mc.endFill(); } 

In the preceding code we do quite a few things. First we import the fileReference object so that we can access the file system. Then we create a new instance of this object named file_fr. Then we create list_obj, which we will use as a listener for file_fr. Now the majority of the events (onSelect, onComplete, and so on) should be self-explanatory, but some that you may not recognize are the error-checking events. These are built-in events and allow for error checking against Security, IO, and HTTP errors that may arise. Then we attach the click handlers to the browser button, and limit the filetypes to JPEGs. The upload button click handler used the upload method to pass our file_fr object to the upload.php page. Finally, we added a little progress bar animation that used the drawing API to fill the rectangle.


In the same directory as your published files, create a directory named images with full read and write permissions for public users.

If you followed the instructions correctly, your file should allow you to access JPGs and upload them to the images directory on your server.

Macromedia Flash Professional 8 Unleashed
Macromedia Flash Professional 8 Unleashed
ISBN: 0672327619
EAN: 2147483647
Year: 2005
Pages: 319 © 2008-2017.
If you may any questions please contact us: