ProgressBar for file uploading in Flex

We can use the ProgessBar to monitor the File upload process in Flex.
See the given example code and use the given Uploader.as

FileUploadExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	backgroundColor="#FFFFFF">

	<mx:Script>
		<![CDATA[
			import com.riacoder.examples.Uploader;

			private var uploader:Uploader = new Uploader();

			private function onUploadClick(event:MouseEvent):void
			{
				uploader.browseAndUpload();
			}
		]]>
	</mx:Script>

	<mx:Canvas width="200" height="200" horizontalCenter="0" verticalCenter="0" backgroundColor="#525252">
		<mx:Button label="Select a file and upload" horizontalCenter="0" verticalCenter="0" click="onUploadClick(event);"/>
	</mx:Canvas>

</mx:Application>

Use the following code to upload the file and for displaying the ProgressBar.

Uploader.as

package com.riacoder.examples
{

	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.net.FileReference;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	import flash.net.URLVariables;

	import mx.controls.Alert;
	import mx.controls.ProgressBar;
	import mx.core.Application;
	import mx.core.UIComponent;
	import mx.managers.PopUpManager;

	public class Uploader
	{
		// FileReference instance, used to select the file.
		private var fileReference:FileReference;	

		// ProgressBar instance, used to display the upload status.
		private var progressBar:ProgressBar;

		// String instance, used to hold the url of the upload location.
		public static const FILE_UPLOAD_URL:String = "http://localhost/test/FileUpload.php";

		// Constructor
		public function Uploader()
		{
			// Initialize the fileReference.
			fileReference = new FileReference();

			// Register the event listeners.
                       fileReference.addEventListener(Event.SELECT, onSelect);
                       fileReference.addEventListener(ProgressEvent.PROGRESS, onProgress);
                       fileReference.addEventListener(Event.COMPLETE, onComplete);
                       fileReference.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

                      // Initialize the progressBar.
                     progressBar = new ProgressBar();
		}

		public function browseAndUpload():void
		{
			// open the file browser window.
			fileReference.browse();
		}

		private function onSelect(evt:Event):void
		{
	             try
	             {
	        	// used to upload the file to the specified location.
	        	var uploadURL:URLRequest = new URLRequest(FILE_UPLOAD_URL);
	        	// used to send the datas while uploading.
		        var uploadData:URLVariables = new URLVariables();
		        // specifiying the fileSize. So from server side you can get the fileSize.
			uploadData.fileSize = fileReference.size;
			// set the HTTP method.
			uploadURL.method = URLRequestMethod.POST;

			// set the progressBar mode to manual. So, you have to set the progress manually.
			progressBar.mode = "manual";
			// While starting the upload process ProgessBar's lable will be displayed as "Uploading File"
			progressBar.label = "Uploading file.";
			// Show the progressbar as popup.
			PopUpManager.addPopUp(progressBar, Application.application as UIComponent, true);
			PopUpManager.centerPopUp(progressBar);

			uploadURL.data = uploadData;
			// start to upload the file.
	               fileReference.upload(uploadURL);
	        }
	        catch (error:Error)
	        {
	        	Alert.show("Error "+error);
	        }
	    }

	    private function onIOError(event:IOErrorEvent):void
	    {
	    	PopUpManager.removePopUp(progressBar);
	    	Alert.show("Uploader::IOError-Unable to upload the file.  "+event.text);
	    }

	    private function onProgress(evt:ProgressEvent):void
	    {
	    	// Calculating the uploaded percentage.
	    	var numPerc:Number = Math.round((Number(evt.bytesLoaded) / Number(evt.bytesTotal)) * 100);
	    	// set the label of progessbar. So the user can see the uploaded percentage.
	    	progressBar.label = "Uploading file "+numPerc+"% Completed.";
	    	// set the progress value of the progressBar.
	    	progressBar.setProgress(numPerc, 100);
	    }

	    private function onComplete(evt:Event):void
	    {
	    	PopUpManager.removePopUp(progressBar);
	    }

	}
}

Advertisement