Bytearray - Programming, Computers and Technology » file uploader http://bytearray.brixtonjunkies.com Tue, 03 Nov 2009 11:52:07 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Flex: Multiple File Uploader http://bytearray.brixtonjunkies.com/2009/10/01/flex-multiple-file-uploader/ http://bytearray.brixtonjunkies.com/2009/10/01/flex-multiple-file-uploader/#comments Thu, 01 Oct 2009 14:32:27 +0000 alchemist http://bytearray.brixtonjunkies.com/?p=529 Flex Multi UploaderUploading is such a common task and can often be a little painful so I decided to write a small library in Flex which simplifies the task. I have released it under GPL license so feel free to use and modify it according to the conditions :)

The Flex client side uploader supports multiple file upload with queuing and multiple threads, meaning more than one upload can be active at a time. It is also written in component style so creating an instance of the uploader is very simple and can be achieved in only a few lines of code (see the example below). It also supports posted additional data with the file upload, handy if you need to pass instructions to the back-end upload script.

The back-end script is not included in the library but could easily be implemented in any language. I have however supplied a PHP example below of how to implement the back-end script to support the Flex uploader (see the example below).

One final note, this code is not polished, it’s definitely Alpha…but still very usable. If you have any issues or questions please let me know, cheers.

Simple example implementation of uploader library

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:cc="FileUploader.Renderers.*"
				layout="absolute"
			    creationComplete="{init()}"
			    width="1018"
			    height="455"
				>
	<mx:Script>
		<![CDATA[

			private function init():void{
				fileUploader.addPostData('mydata','1234567890');
			}

		]]>
	</mx:Script>

	<cc:FileUploadComp id="fileUploader"
					   x="0"
					   top="8"
					   left="8"
					   width="1000"
					   maxThreadsEnabled="true"
					   uploadUrl="http://a.b.c.d/MyUploaderScript.php"
					   />
</mx:Application>


PHP backend example implementation of uploader code

<?php
	$tmpFileName = isset($_FILES['Filedata']['tmp_name']) ? $_FILES['Filedata']['tmp_name'] : '';
	$orgFileName = isset($_FILES['Filedata']['name']) ? $_FILES['Filedata']['name'] : '';
	$mydata = isset($_REQUEST['mydata']) ? $_REQUEST['mydata'] : '';

	error_log('tmpfile: ' . $tmpFileName);
	error_log('filename: ' . $orgFileName);
	error_log('mydata: ' . $mydata);	

	if (true){
		print 'ok';
	}
	else{
		header('Status: 500 ' . $resultAry[1]);
		header('HTTP/1.1 500 ' . $resultAry[1]);

		$outputStr = '<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\">' .
				 '<html><head>' .
				 '<title>500 ' . $resultAry[1] . '</title>' .
				 '</head><body>' .
				 '<h1>500 ' . $resultAry[1] . '</h1>' .
				 '<hr>' .
				 $_SERVER['SERVER_SIGNATURE'] .
				 '</body></html>';
		print $outputStr;
	}
?>

Also here’s and example of a Flash crossdomain.xml (this one is reasonably open!) which will be needed in the root of your site…otherwise flex will complain. 

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<allow-access-from domain="*" to-ports="*"/>
	<site-control permitted-cross-domain-policies="all"/>
</cross-domain-policy>

Demo Flex Uploader

DOWNLOAD (version 1.0a)

]]> http://bytearray.brixtonjunkies.com/2009/10/01/flex-multiple-file-uploader/feed/ 13