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:
<?phpif ($_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 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 Objectimport flash.net.FileReference;//initial settingsupload_butn.enabled = false;//the FileReference objectvar file_fr:FileReference = new FileReference();//object for listening to for FileReference eventsvar 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 cancellist_obj.onCancel = function(){ name_txt.text = "Cancel was selected";}//if there is an IO errorlist_obj.onIOError = function(fileRef){ name_txt.text = "IO error with " + fileRef.name;}//security error problemlist_obj.onSecurityError = function(fileRef, error){ name_txt.text = "Security error with " + fileRef.name + ":" + error;}//httpErrorlist_obj.onHTTPError = function(fileRef:FileReference, error:Number){ name_txt.text += "HTTP error: with " + fileRef.name + ":error #" + error;}//attach the listenerfile_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 buttonupload_butn.clickHandler = function(){ file_fr.upload("upload.php"); rec_mc.fillColor = Math.random()*0x1000000;}//drawing the rectanglefunction 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. It is important to note that file upload from Flash 8 is not supported for secure directories, but has been known to work on PCs after re-authenticating.