In this tutorial I’ll show you how to build a Flash uploader for uploading files from the user’s computer. The result will be ideal for large file sizes as it will display a progress bar and the percentage left to upload. We’ll even show the user the number of bytes uploaded per second.

Folder icon by Michael Ludwig.

Editor’s note: I’m afraid there’s no demo for this tut – you’ll have to download the source.zip and play around with uploading files to your own server

Step 1: Button Design

Create a new ActionScript 3.0 Flash file and set the dimensions to 500 x 100 pixels. We’ll begin by creating a select button. Draw a rounded rectangle, I’ve made mine with a 5px round corner, a blue gradient and a 2px gray stroke.

Press F8 to turn it into a button and give it the instance name “select”. Name the button on the stage “select_btn”.

Inside the button, fill the 3 states with a slightly different gradient. Create another layer above the first and add a static text field with the text “SELECT FILE”. It’s best to separate the assets because it’s easier to edit them later.

Step 2: Progress Bar Design

Back to the main stage, create another rounded box with a white colour and a gray stroke. This will be the progress bar. I did mine like this:

Again, press F8 and turn it into a movieclip with the name “progress”. Inside the progress movieclip, create 2 more layers above the first and move the white fill into the third, leaving only the stroke on the first layer.. Rename the first layer “margin”, the second “bar” and the third “mask”. We’re going to turn the third layer into a mask.

On the “bar” layer, create a blue rectange with the same dimensions as the fill layer, but be carefull to make it slightly bigger so that when we apply the mask we don’t have holes. Place it at 0,0 and turn it into a movieclip with the instance name “bar”. This will be the bar that will show the progress.

Right-click the third layer and select “Mask” from the menu. You should have something like this:

Step 3: Duplicate Button

In the library, right-click on the select button we created earlier and select “Duplicate”. Name the duplicate “cancel” and in the button change the textfield’s text to “CANCEL”. We’re making a duplicate of the select button that will be the cancel button. We’ll later show only one of them in the stage.

In the main scene, create another layer above the first and place the newly created cancel button exacly at the same position as the select button.

Step 4: Dynamic Label

We’re almost done with the assets. Create another text field, this time a dynamic text field and give it the instance name “label_txt”. This will show the user the success message, the error message, or the progress percent. Make sure the text is not selectable.

Test the file, to see how it’s going.

Step 5: Document Class

We have only one more thing to do before we begin coding; set the document class to “Uploader”.

Step 6: The cCoding

In the same folder as the Flash file, create a new ActionScript file with the name “Uploader.as”. The name is important for the class to be found. Begin coding the default package and import the required classes. I’ve used “import Flash.display.*” for speed, but once we’re done, we can include only the required classes to make the file smaller.

package {

	import Flash.display.*;
	import Flash.events.*;
	import Flash.text.*;

	import Flash.net.FileReference;
	import Flash.net.FileReferenceList;
	import Flash.net.FileFilter;
	import Flash.net.URLRequest;
	import Flash.utils.Timer;
	import Flash.events.TimerEvent;

	public class Uploader extends MovieClip {

	}
}

Step 7: Variables

We’ll begin by setting a few variables:

public class Uploader extends MovieClip {

		var file:FileReference;
		var filefilters:Array;
		var req:URLRequest;
		var tm:Timer;
		var speed:Number = 0;
		var currbytes:Number = 0;
		var lastbytes:Number = 0;

	}

Step 8: Constructor Function

Create the constructor function and add the following:

	public function Uploader(){
		req = new URLRequest();
		req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://www.cbesslabs.com'; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php';
		file = new FileReference();
		setup( file );
		select_btn.addEventListener( MouseEvent.CLICK, browse );
		progress_mc.bar.scaleX = 0;
		cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );
		cancel_btn.visible = false;
	}

Let me explain what’s going on here:

We’re creating a new URLRequest class and set the url to the upload php file.

The line “( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : ‘http://www.google.com’” is a conditional, meaning that if we provide the movie the parameter f, it will set the url to the f parameter. Otherwise it will use the string hardcoded here, good ol’ Google, for testing only.

We’re doing the conditional so we can reuse the file. This way, we can change only the f parameter with a path to the url and it will upload to the specified url.

Next we’re creating a new FileReference Object, the class handling the upload process. We’re passing the FileReference Object to the function setup() which we’ll later code to set up the various listeners.

Finally, we add click listeners to the select and cancel buttons, set the scale of the progressbar to 0 and hide the cancel button.

Step 9: Events

We’re now creating the setup() function.

private function setup( file:FileReference ){
	file.addEventListener( Event.CANCEL, cancel_func );
	file.addEventListener( Event.COMPLETE, complete_func );
	file.addEventListener( IOErrorEvent.IO_ERROR, io_error );
	file.addEventListener( Event.OPEN, open_func );
	file.addEventListener( ProgressEvent.PROGRESS, progress_func );
	file.addEventListener( Event.SELECT, selectHandler );
	file.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA, show_message );
}

We could omit the Event.COMPLETE and Event.CANCEL event, but I have added them just for testing. We’re setting up a CANCEL event for when the user cancels the selection dialog. We have:

• an IO_ERROR event in case the file cannot be uploaded
• an OPEN event for when the upload begins
• the PROGRESS event that will update the percent uploaded
• the SELECT event for when the user has selected a file and we automatically begin uploading
• and an UPLOAD_COMPLETE_DATA event, which is a custom event triggered when the file has been uploaded and the php file has responded to the request.

Make sure you create all the event functions otherwise you’ll get an error compiling.

Step 10: Browse

We’re continuing with the browse function, triggered when the select button has been clicked. We have to show the dialog box so the user can select a file:

public function browse( e:MouseEvent ){
	filefilters = [ new FileFilter('Images', '*.jpg') ]; // add other file filters
	file.browse( filefilters );
}

Notice that I’ve added a FileFilter object inside an array and added the array to the FileReference’s browse method. You can add another file type by adding another FileFilter object with a different extension. This will filter the file extensions on the select dialog so the user can only select correct file types. This is only a filename check and doesn’t check whether the image file is indeed an image.

Step 11: Upload

When the user has selected a file to upload, the SELECT event is triggered. We’re now calling FileReference’s upload() method to upload the file to the php file on the server with the url request argument.

private function selectHandler( e:Event ){
	file.upload( req );
}

Step 12: Button Visibility

Les’s create the open_func function. This function is triggered when the upload begins. We’ll hide the select button and show the cancel button.

private function open_func( e:Event ){
	cancel_btn.visible = true;
	select_btn.visible = false;
}

Step 13: Progress

Create the progress function:

private function progress_func( e:ProgressEvent ){
	progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal;
	var tf = new TextFormat();
	tf.color = 0x000000;
	label_txt.defaultTextFormat = tf;
	label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded';
}

Let me explain what’s going on here. We’re setting the scale of the bar movieclip showing the percent uploaded. This is accomplished by dividing the bytesLoaded to bytesTotal properties of the event object. The progress event provides us with the amount of uploaded bytes and total bytes of the file.

Next, we create a TextFormat object and set the colour to black ( 0×000000 ) for the text label. We’ll need this step because later we’ll change the colour of the text to green or red according to the message.

Finally, we set the text field’s text with the percentage uploaded.

Step 14: Error

We’ll create the error function:

private function io_error( e:IOErrorEvent ){
	var tf = new TextFormat();
	tf.color = 0xff0000;
	label_txt.defaultTextFormat = tf;
	label_txt.text = 'The file could not be uploaded.';
	cancel_btn.visible = false;
	select_btn.visible = true;
}

Basically, we change the colour of the label text, set it to an error message and then swap the cancel and select buttons again.

Step 15: Show Message

Let’s create the show_message function which will check whether the upload has been successful:

private function show_message( e:DataEvent ){
	var tf = new TextFormat();
	if( e.data == 'ok' ){
		tf.color = 0x009900;
		label_txt.defaultTextFormat = tf;
		label_txt.text = 'The file has been uploaded.';
	} else if( e.data == 'error'){
		tf.color = 0xff0000;
		label_txt.defaultTextFormat = tf;
		label_txt.text = 'The file could not be uploaded.';
	}
}

Here, we’re testing if the data property of the UPLOAD_COMPLETE_DATA event is ‘ok’ or ‘error’ and show a message appropriately. The data property of this event contains the server response from the php script.

Step 16: Cancel

This is the last function which will be triggered when the cancel button is clicked. This calls the FileReference’s cancel() function to cancel the upload. We’re also calling reset() to clean up.

private function cancelUpload( e:MouseEvent ){
	file.cancel();
	reset();
}

We trigger a reset() function to clean up the assets, set the text to "" and swap the cancel and select buttons:

private function reset(){
	cancel_btn.visible = false;
	select_btn.visible = true;
	label_txt.text = '';
	progress_mc.bar.scaleX = 0;
}

Go ahead and test the file in Flash.

For now, the upload works, but at the end we get the error message. This is because we haven’t provided the path parameter, so the swf takes the hardcoded google page. As that page doesn’t return us ‘ok’ , we get the error. We have to build the php file..

Step 17: Upload Speed – Timer

Let’s show the user the speed he is uploading with. In the constructor function add the lines:

tm = new Timer( 1000 );
tm.addEventListener( TimerEvent.TIMER, updateSpeed );

We’re creating a timer that will run every second and will check the speed.

Step 18: Upload Speed – Method

In the open_func() function add this line:

tm.start();

This will start the timer when the upload begins. We’ll now create the updateSpeed() method:

private function updateSpeed( e:TimerEvent ){
	speed = Math.floor( (currbytes - lastbytes)/1024 );
	lastbytes = currbytes;
}

This is what happens here: we’re calculating the speed by subtracting the variable lastbytes from currbytes. The lastbytes variable is afterwards set to the currbytes. So, when both variables are 0, the speed is 0. The currbytes variable will hold the current number of bytes uploaded. We cannot access this directly, that’s why we’ve created the currbytes variable. This variable will be set from our PROGRESS event where we can access the bytesLoaded property.

Lastly, we divide everything by 1024 to get the result in kilobytes and round the value for display with Math.floor().

Step 19: Final Modification

Let’s add the last modification so we can go on to the php script. In the progress_func() modify the line:

label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded';

with this:

label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded '+speed+' kb/s';

Step 20: Full Code

Here is the full code for the Flash uploader:

package {

	import Flash.display.*;
	import Flash.events.*;
	import Flash.text.*;

	import Flash.net.FileReference;
	import Flash.net.FileReferenceList;
	import Flash.net.FileFilter;
	import Flash.net.URLRequest;
	import Flash.utils.Timer;
	import Flash.events.TimerEvent;

	public class Uploader extends MovieClip {

		var file:FileReference;
		var filefilters:Array;
		var req:URLRequest;
		var tm:Timer;
		var speed:Number = 0;
		var currbytes:Number = 0;
		var lastbytes:Number = 0;

		public function Uploader(){
			req = new URLRequest();
			req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://www.google.com';
			file = new FileReference();
			setup( file );
			select_btn.addEventListener( MouseEvent.CLICK, browse );
			progress_mc.bar.scaleX = 0;
			tm = new Timer( 1000 );
			tm.addEventListener( TimerEvent.TIMER, updateSpeed );
			cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );
			cancel_btn.visible = false;
		}

		public function browse( e:MouseEvent ){
			filefilters = [ new FileFilter('Images', '*.jpg') ]; // add other file filters
			file.browse( filefilters );
		}

		private function setup( file:FileReference ){
			file.addEventListener( Event.CANCEL, cancel_func );
			file.addEventListener( Event.COMPLETE, complete_func );
			file.addEventListener( IOErrorEvent.IO_ERROR, io_error );
			file.addEventListener( Event.OPEN, open_func );
			file.addEventListener( ProgressEvent.PROGRESS, progress_func );
			file.addEventListener( Event.SELECT, selectHandler );
			file.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA, show_message );
		}

		private function cancel_func( e:Event ){
			trace( 'canceled !' );
		}

		private function complete_func( e:Event ){
			trace( 'complete !' );
		}

		private function io_error( e:IOErrorEvent ){
			var tf = new TextFormat();
			tf.color = 0xff0000;
			label_txt.defaultTextFormat = tf;
			label_txt.text = 'The file could not be uploaded.';
			tm.stop();
			cancel_btn.visible = false;
			select_btn.visible = true;
		}

		private function open_func( e:Event ){
			//trace( 'opened !' );
			tm.start();
			cancel_btn.visible = true;
			select_btn.visible = false;
		}

		private function progress_func( e:ProgressEvent ){
			progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal;
			var tf = new TextFormat();
			tf.color = 0x000000;
			label_txt.defaultTextFormat = tf;
			label_txt.text = Math.round( (e.bytesLoaded/e.bytesTotal)*100)+'% uploaded '+speed+' kb/s';
			currbytes = e.bytesLoaded;
		}

		private function selectHandler( e:Event ){
			file.upload( req );

		}

		private function show_message( e:DataEvent ){
			tm.stop();
			var tf = new TextFormat();
			if( e.data == 'ok' ){
				tf.color = 0x009900;
				label_txt.defaultTextFormat = tf;
				label_txt.text = 'The file has been uploaded.';
			} else if( e.data == 'error'){
				tf.color = 0xff0000;
				label_txt.defaultTextFormat = tf;
				label_txt.text = 'The file could not be uploaded.';
			}
		}

		private function updateSpeed( e:TimerEvent ){
			speed = Math.round( (currbytes - lastbytes)/1024 );
			lastbytes = currbytes;
		}

		private function cancelUpload( e:MouseEvent ){
			file.cancel();
			reset();
		}

		private function reset(){
			cancel_btn.visible = false;
			select_btn.visible = true;
			label_txt.text = '';
			progress_mc.bar.scaleX = 0;
		}

	}
}

Step 21: The PHP Script

Let’s build our php script quickly:

<?php

$uploads_dir = './uploads/';

if( $_FILES['Filedata']['error'] == 0 ){

  if( move_uploaded_file( $_FILES['Filedata']['tmp_name'], $uploads_dir.$_FILES['Filedata']['name'] ) ){

  echo 'ok';

  exit();

  }

  }

  echo 'error';

  exit();

?>

I’ll just quickly sum this up (PHP isn’t strictly within the scope of this tut). We define a path where we will put the file, then we check whether the $_FILES['Filedata']['error'] is 0 ( if there are no errors ). We then check if move_uploaded_file() has successfully transferred the file in the folder and we show “ok” or “error” depending on the result.

One last point: you’ll have to make sure that the folder exists and it is writable before running the script.

This is the end of our tutorial. Thank you for reading, I hope you learned something!