This tutorial demonstrates how to upload a local file to a remote web server using Flex and PHP. Flex provides the UI for a user to choose a file and then sends that data to a PHP script on the server side to do the processing.

The process is very similar to how this is typically done in HTML. In HTML, you create a form, add a file input field and submit that form to a server side script using the POST method.

The first thing to do is create a PHP script on your web server that will receive the file. The following code is a simple example that demonstrates the bare basics:

<?php

$tempFile = $_FILES['Filedata']['tmp_name'];
$fileName = $_FILES['Filedata']['name'];
$fileSize = $_FILES['Filedata']['size'];

move_uploaded_file($tempFile, "./" . $fileName);

?>

This script moves the temporary file object uploaded through POST data to a concrete location. In this case the file is moved to the same folder the script is in.

Note: There are potential security concerns to be aware of with this example PHP code. See the PHP manual for guidelines on safely uploading files using PHP.

The next step is to create the Flex application. We use ActionScript to build a URLRequest, attach the file object, and send it out.

Here is the MXML code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
	<mx:Script>
		<![CDATA[
		
			private var urlRequest:URLRequest;
			private var fileReferenceList:FileReferenceList;
			private var serverSideScript:String = "http://localhost/uploadFile.php";
		
			private function init():void {
				urlRequest = new URLRequest(serverSideScript);
				fileReferenceList = new FileReferenceList();
				fileReferenceList.addEventListener(Event.SELECT, fileSelectedHandler);
			}
			
			private function uploadFile():void {
				fileReferenceList.browse();
			}
			
			private function fileSelectedHandler(event:Event):void {
				var fileReference:FileReference;
				var fileReferenceList:FileReferenceList = FileReferenceList(event.target);
				var fileList:Array = fileReferenceList.fileList;

				// get the first file that the user chose
				fileReference = FileReference(fileList[0]);
				
				// upload the file to the server side script
				fileReference.addEventListener(Event.COMPLETE, uploadCompleteHandler);
				fileReference.upload(urlRequest);
				
				// update the status text
				statusText.text = "Uploading...";
			}
			
			private function uploadCompleteHandler(event:Event):void {
				statusText.text = "File Uploaded: " + event.target.name;
			}
			
		]]>
	</mx:Script>
	
	<mx:Label text="Upload File From Flex to PHP" fontWeight="bold"/>
	<mx:Label text="Choose a file..." id="statusText"/>
	<mx:Button click="uploadFile();" label="Upload File"/>
	
</mx:Application>

To get this working on your own, upload the PHP script to your web server, create a new Flex application with the above code, and then change the serverSideScript variable to point to the proper location.

When everything works properly the file will be uploaded and the uploaded file name will be displayed in the Flex app as shown below.