Avg. Rating 3.6

Problem

Code a control so that end users can upload a file from their local hard drive to a remote web server.

Solution

To solve the problem, create a URLRequest and attach a file reference in Flex before sending the data off to a PHP script on the web server.

Detailed explanation

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

For this solution, first 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.

Next, create the Flex application. In this example, I 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 machine, 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.

Report abuse

Related recipes