Search This Blog


Flex Tutorials 16-Multiple file uploader in .NET using Adobe Flex

Create an MXML application with the following code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute" creationComplete="myFunction();" xmlns:net="*" xmlns:filters="flash.filters.*">
<mx:Button x="10" y="10" label="Choose Files" id="btnSelectFiles"/>
<mx:Button x="114" y="10" label="Upload" id="btnUpload" visible="false"/>
<mx:Label x="10" y="208" width="100%" id="lblFileName" fontWeight="bold"/>
<mx:List borderStyle="none" backgroundAlpha="0" x="10" y="40" width="30%" id="listSelectedFiles" visible="false" />
<mx:Label x="10" y="234" width="100%" id="lblUploadedBytes" fontWeight="bold"/>
<mx:Label x="10" y="260" width="100%" id="lblTotalBytes" fontWeight="bold"/>

import mx.messaging.AbstractConsumer;
//for Single Selection Mode use FileReference instead of FileReferenceList
public var fileReferenceList:FileReferenceList = new FileReferenceList();
public function eventResponse(Event:MouseEvent):void
// Set the file filters in the open dialog box
var typeFiler:FileFilter = new FileFilter("All","*.*");
// show the dialog box
public function selectResponse(event:Event):void
// Create an array with the size of the selected files.
var filesSelected:Array = new Array(fileReferenceList.fileList.length);
// Loop through all the selected files and add their names to the List control
for(var i:int=0;i<fileReferenceList.fileList.length;i++)
var fileReference:FileReference = fileReferenceList.fileList[ i ];
filesSelected[ i ] =;
listSelectedFiles.dataProvider = filesSelected;
listSelectedFiles.visible = true;
btnUpload.visible = true;
public function myFunction(): void
// This function is called on creationComplete event of this application
// Add event handler for the mouse click on the selectFiles button
btnSelectFiles.addEventListener(MouseEvent.CLICK, eventResponse);
// Add event handler for the mouse click on the upload button
btnUpload.addEventListener(MouseEvent.CLICK, btnUploadResponse);
// Add event handler for the select action in the open file dialog box
public function UploadFiles():void
// If the user selected 1 or multiple files
if(fileReferenceList.fileList.length > 0)
// For each file selected
for(var i:int=0;i<fileReferenceList.fileList.length;i++)
// Create a FileReference instance of each file
var fileReference:FileReference = fileReferenceList.fileList[ i ];
// Create a new URLRequest class: The parameter is the aspx handler page
var request:URLRequest = new URLRequest("http://localhost:1283/FlexUploadFles/UploadHandler.aspx");
// Add event handler for the progress
fileReference.addEventListener(ProgressEvent.PROGRESS, progressStatus);
// Set the content type
request.contentType = "application/octet-stream";
// Set the method of the request
request.method = "POST";
// Upload the file
public function btnUploadResponse(event:Event):void
// Disable the Select files button, upload button, and call the UploadFiles function
btnSelectFiles.enabled = false;
btnUpload.enabled = false;
public function progressStatus(event:ProgressEvent):void
var file:FileReference = FileReference(;
// Set the name of the currently being uploaded file
lblFileName.text = "Uploading File: " +;
// Set the number of bytes being uploaded
lblUploadedBytes.text = "Bytes Uploaded: " + event.bytesLoaded;
// Set the total number of bytes
lblTotalBytes.text = "Total Size: " + event.bytesTotal + " bytes";


In .NET side write the following code to Pass the values after embeding the SWF File in ASPX page

CS Code:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class UploadHandler : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
for (int i = 0; i < Request.Files.Count; i++)
string fileName = System.IO.Path.GetFileName(Request.Files[i].FileName);
Request.Files[i].SaveAs(Server.MapPath("~/UploadedFiles/") + fileName);

If you want to use filter option in your File Uploader Control write the following MXML Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""

import mx.controls.Alert;
private var imageFilter:FileFilter;
private var htmlFilter:FileFilter;
private var fileReference:FileReference;

private function init():void{

imageFilter=new FileFilter("Image Files","*.jpg;*.gif;*.png")
htmlFilter=new FileFilter("HTML Files","*.html")
fileReference=new FileReference();
fileReference.addEventListener(Event.SELECT, fileSelectedHandler);


private function fileSelectedHandler(e:Event):void{
if(!='.jpg'&&!='.png'&&!='.gif'&&!='.html'){"Unexpected File Format","Error");

}else{ "Name : ""\n"+
"Type : ""\n"+
"CreationDate : ""\n"+
"Size : ""bites \n",
"File Informations");
private function browse(filter:FileFilter):void{


<mx:Button label="Browse Images Files" click="browse(imageFilter)" x="10" y="60" width="150"/>
<mx:Button label="Browse Html Files" click="browse(htmlFilter)" y="30" x="10" width="150"/>

No comments: