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.
This article is an excerpt from the soon to be released Flash Professional 8 Unleashed.
The PHP Upload Script
- Create a new PHP file, save it as upload.php.
- 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.
The Flash Interface File
- 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 layercontent
. - In the
content
layer, create a new rectangle, make it a movie clip namedrect_mc
, and be sure that it is big enough to hold the following:- Textfield
- Instance name -
name_txt
- Instance name -
- Button Component
- Instance name -
browse_butn
- Label -
Browse
- Instance name -
- Button Component
- Instance name -
upload_butn
- Label -
Upload
- Instance name -
- Textfield
- In the Actions layer, in frame 1, paste the following code:
//import the FileReference Object import flash.net.FileReference; //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 = file_fr.name; } 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 " + fileRef.name; } //security error problem list_obj.onSecurityError = function(fileRef, error){ name_txt.text = "Security error with " + fileRef.name + ":" + error; } //httpError list_obj.onHTTPError = function(fileRef:FileReference, error:Number){ name_txt.text += "HTTP error: with " + fileRef.name + ":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 createlist_obj
, which we will use as a listener forfile_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 ourfile_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.