Home > Code, Flex, General, PHP > Flex: Multiple File Uploader

Flex: Multiple File Uploader

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)

  1. Sal
    October 1st, 2009 at 16:56 | #1

    Thanks a lo for this, just what I was looking for. But…how do I make it work?. Sorry but I am ery new at Flex.

  2. October 1st, 2009 at 17:56 | #2

    I assume you are familiar with Flex builder?
    Have you tried the example I have laided out?
    What exactly is not working?

  3. cliffman
    October 7th, 2009 at 00:53 | #3

    Great example, can you explain just a little bit about how to get it functioning. I am wondering what you have to do with the download, since it is a collection of actionscript and mxml files? Thanks

  4. October 7th, 2009 at 07:36 | #4

    Thanks :)

    I may decide to make the uploader usage more self explanatory if there is any demand for it

    1. If you are running PHP on the backend of your site you can use the the 2nd code snippet to test the uploader (just remember the URL).

    2. Make sure the crossdomain.xml is in the root of your webserver (where both the Flex uploader and backend upload script live, they can however be in different directories of course).

    3. In Flexbuilder create a new project

    4. In your Flex project source folder (the src folder) place the unzipped library (it should be called FileUploader).

    5. In your main mxml file paste in the 1st code snippet and replace the upload URL to the URL of your upload script (in this example your PHP script).

  5. Chris
    October 10th, 2009 at 16:14 | #5

    Hello;
    I have been wrestling with trying to impliment a multi-file uploader in flex for a couple weeks now with little success.
    I have 2 questions:
    1. Should this work with HTTPS ?? Im attempting to upload to a directory (sub-dir) below
    where the SWF’s being served. I’ve had some success with the fileref class use on normal http but im not being forced to move to https server config and this doesnt seem to work.
    2. is the crossdomain.xml absolutely needed (i dont control the server config) if the upload handler is in the same directory as the served swf and it’s uploading the file to the same or lower level dir ??

    Thanks in advance

  6. October 13th, 2009 at 07:43 | #6

    This uploader uses Flex’ FileReference.upload which is known to be problematic with HTTPS in firefox.

    The fact that you are trying to place the files into a sub-directory should have no impact at all, that is server side functionality.

    The file will be placed wherever you want it to go, for example PHP takes the file and puts it in a tmp location (on Linux that is likely to be in /tmp) and presents you will a filehandle you can make reference to at a later point in the code.

    The crossdomain.xml is required to allow Flex out of it’s sandbox and present the backend with the file upload.

  7. Doug Hammond
    March 9th, 2010 at 14:27 | #7

    Hi Justin,

    Many thanks for sharing this. I just integrated it into my latest CMS system.

    One enhancement I would like to see is a callback to the page JavaScript upon queue completion. Any ideas ?

    Cheers,
    Doug.

  8. Bruno
    October 27th, 2010 at 17:45 | #8

    Does example works in AIR application??

    Tanks!

    Bruno

  9. Brent
    January 9th, 2011 at 23:09 | #9

    You are using threading here. Flash, as far as I know, is under the cover single threaded. Does multi-threading help in terms of through put of uploads or does flash plugin end-up switching between each thread by constantly stopping and restarting uploads for each thread and end up using the same amount of bandwidth? Almost like a pump that has 4 intakes for water but a single pipe to push water out.

  10. January 10th, 2011 at 09:38 | #10

    Not currently but it should be fairly straight forward to convert it :)

  11. January 10th, 2011 at 10:09 | #11

    How flash interacts with the operating system and actual real OS threads is a completely different discussion.

    Flash applications for all intensive purposes uses a virtual environment for execution, and calls within side code are asynchronous and event driven, which implies multiple operations can be executed simultaneously (at least preceptively). I have implemented virtual threading using flex timers (events) which allows multiple uploads to execute at the same time, which implies the flash engine is “probably” multiplexing the “virtual thread” code for each upload onto one real OS thread (but that is based on how the Flash engine is implemented).

    The benefit of this design is if you have bandwidth shaping on a firewall multiple uploads may allow you to use more bandwidth and hence increase your overall upload speed

  12. August 3rd, 2011 at 03:47 | #12

    Please provide the complete source code….
    which will be useful…

  13. August 3rd, 2011 at 07:33 | #13

    I think you’ll find the source code is already attached in a zip file

  1. No trackbacks yet.
*