Soliant Consulting | Custom Software Consulting, Development, and Programming

Flex Uploader / Viewer Component Part 3 - Tying It All Together

This is the third post in a series of 3 on how to make a Flex uploader.
For the first post, go here.
For the second 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.

Tying it all together

Here are some of the handler functions that were assigned in the first post. The most important one is the “onUploadCompleteData” one, which downloads the newly uploaded file for display.

private function onUploadCompleteData(event:DataEvent):void {
	clearUpload();
	updateProgBar(100);
	downloadFile( _strDownloadUrl + _fileName );

}
private function onIoError(event:IOErrorEvent):void {
	clearUpload();
	updateProgBar();
	updateProgressBarLabel(_fileName.length > 0 ? "Unable to download " + _fileName : NO_FILE_SELECTED);
}

private function onDownloadIoError(event:IOErrorEvent=null):void {
	clearDownload();
	updateProgressBarLabel(_fileName.length > 0 ? "Unable to download " + _fileName : NO_FILE_SELECTED);
	progBar.setProgress(0, 100);
}

The “clearUpload” function removes any event listeners to prevent memory leaks.
The “updateProgressBar” function sets it’s value to 100.
Finally, the “downloadFile” function does just that with the given URL. It is listed below:

private function downloadFile ( _uri:String ) : void {

	//calculate a query parameter to prevent caching...
	var preventCacheQuery:String = "?ts=" + new Date ().getTime().toString() + Math.random();

	_imageText.visible = false;
	_image.source = null;

	try {
		updateProgressBarLabel(_fileName);

		if ( isViewableImageType ( _uri ) ) {

			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderHandler);
			_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onDownloadIoError);
			_loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);

			try {
				_loader.load(new URLRequest(encodeURI(_uri + preventCacheQuery)));
			}catch (e:Error){
				onDownloadIoError();
			}
		}
		else {
			//don't try to download - we're done - send out the finish event
			_imageText.visible = true;
			_image.source = null;
			clearDownload();
			updateProgBar();
		}
	}catch (e:Error){
	}
}

The cache query preventer is necessary as some browsers will try to cache images and will not update if the same url is queried.
On a successful download, “loaderHandler” is called to load the data into the image component.
The “viewableImageType” function is documented in the source code (as are all the remaining functions)

Loader handler does this:

private function loaderHandler(e:Event):void {
	try {
		_image.source = e.currentTarget.content;
	}catch (e:Error){
	}
}

All of this functionality is contained in the Uploader component in a script block. The rest of the component consists of this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:com="*"
	xmlns:caspar="com.caspar.*"
	xmlns:longoria="com.longoria.*"
	layout="vertical"
	width="100%" height="100%" minHeight="60" title="Upload images or files <100k. Only JPGs, gifs, pngs and swf files will preview.">

	(actionscript here)

	<mx:Canvas width="100%" height="100%" id="canvas1">
		<longoria:SmoothImage id="_image" autoLoad="true" right="0" left="0" top="0" bottom="0"
			horizontalAlign="center" verticalAlign="middle" />
		<mx:Text id="_imageText" text="(Preview not available for this filetype)" horizontalCenter="0" verticalCenter="0" width="90%" visible="false" textAlign="center"/>
	</mx:Canvas>

	<mx:ControlBar horizontalAlign="center" verticalAlign="middle">
		<mx:Button id="btnAdd" click="addFile()" icon="@Embed('assets/add.png')" width="26"/>
		<mx:Button id="btnRemove" click="removeFile()" icon="@Embed('assets/delete.png')" width="26"/>
		<mx:ProgressBar id="progBar" mode="manual" label="{NO_FILE_SELECTED}" height="22" labelPlacement="center" width="100%" barColor="0x0202bb"/>
		<mx:Button id="btnCancel" icon="@Embed('assets/cancel2.png')" width="26" click="onUploadCanceled()"/>
	</mx:ControlBar>
</mx:Panel>

Include this component in your mxml Application (remembering to set the upload, download and documents urls on the component).
if the php is working correctly and you have set up the urls correctly, the application should work. Make sure that you also check the PHP upload and download limits in the php.ini file for your install.

Happy coding!!