The aim of this series of 3 blogs is to build a working file uploader (that allows a preview of the uploaded file).

For the second post, go here.
For the third post, go here.

You can download the php file here.
You can download the flex project file here.
A demo of the file is here.

You will need a working web server running php 4 or 5. I won’t be showing how to set up the php server, but for a local one, I recommend MAMP for Macs and WAMP for windows users.

This series breaks the process into three main parts: Using the FileReference Class, Interfacing with the PHP back-end and finally, Creating and displaying the uploaded file.

Using the FileReference Class

The Flex FileReference Class http://livedocs.adobe.com/flex/gumbo/langref/flash/net/FileReference.html does not allow the Flash Player to determine the actual file path, so this necessitates downloading the file from the server once it has been successfully uploaded.

This shows how to select a file for upload:

_fileRef = new FileReference();
_fileRef.addEventListener(Event.SELECT, startUpload);
var fileTypes:FileFilter;
fileTypes = new FileFilter("Images (*.jpg, *.jpeg, *.tif, *.png, *.psd, *.ai, *.eps)","*.jpg; *.jpeg; *.tif; *.png; *.psd; *.ai; *.eps");
var allTypes:Array = new Array(fileTypes);
_fileRef.browse(allTypes);

This creates a new FileReference, adds a listener for the “Select” event (which is the user hitting “Ok” in the file chooser dialogue), adds a filter for allowed files and opens the dialogue.

private function startUpload( event:Event ):void {

	//you can wrap this all in a _fileRef.size if{} statement to control file sizes
	_fileName = _fileRef.name;

	// Variables to send along with upload
	var sendVars:URLVariables = new URLVariables();
	var request:URLRequest = new URLRequest();
	request.data = sendVars;
	request.url = _strUploadUrl;
	request.method = URLRequestMethod.POST;

	//send the filename, action (instructions to the php) and path (where to put the file)
	sendVars.file_name = _fileName;
	sendVars.action = "upload";
	sendVars.path = _documentsPath;

	//handle all events associated with the upload. Note the use of UPLOAD_COMPLETE_DATA,
	//rather than UPLOAD_COMPLETE, as it is a more reliable indicator of a complete upload.
	_fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, onUploadCompleteData);
	_fileRef.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);
	_fileRef.addEventListener(IOErrorEvent.IO_ERROR, onIoError);
	_fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);

	_fileRef.upload(request,"file");
}

In the final line, you can use any name you like in place of “file”, but you must adjust your PHP to use the same name when referring to the file you just passed through.

_strUpload and _documentsPath are set in the main Flex Application like so:

<caspar:UploadPanel x="0" height="100%" width="100%"
    uploadUrl="http://localhost:8888/Uploader/upload.php"
    downloadUrl="http://localhost:8888/Uploader/Files/"
    documentsPath="Uploader/Files/"/>

I defined getters and setters in the “Uploader” class to make this work.

Related posts:

1. Flex Uploader / Viewer Component Part 2 - Setting up the PHP This is the second post in a series of 3...
2. Flex Uploader / Viewer Component Part 3 - Tying It All Together This is the third post in a series of 3...
3. How to Print a Component to Disk in Flex Here is an example of how to print a component...
4. Flex TitleBox Component For a recent project I was working on, I needed...
5. How to Define a RemoteObject in Actionscript For the project I have been recently working on, I...

Related posts brought to you by Yet Another Related Posts Plugin.