Search This Blog

2009-11-23

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="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="myFunction();" xmlns:net="flash.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"/>

<mx:Script>
<![CDATA[
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
fileReferenceList.browse([typeFiler]);
}
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 ] = fileReference.name;
}
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
fileReferenceList.addEventListener(Event.SELECT,selectResponse);
}
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
fileReference.upload(request,fileReference.name,false);
}
}
}
public function btnUploadResponse(event:Event):void
{
// Disable the Select files button, upload button, and call the UploadFiles function
btnSelectFiles.enabled = false;
btnUpload.enabled = false;
UploadFiles();
}
public function progressStatus(event:ProgressEvent):void
{
var file:FileReference = FileReference(event.target);
// Set the name of the currently being uploaded file
lblFileName.text = "Uploading File: " + file.name;
// 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";
}
]]>
</mx:Script>

</mx:Application>

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="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="{init()}"
>

<mx:Script>
<![CDATA[
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( e.target.type.toString()!='.jpg'&&
e.target.type.toString()!='.png'&&
e.target.type.toString()!='.gif'&&
e.target.type.toString()!='.html'){

Alert.show("Unexpected File Format","Error");

}else{

Alert.show( "Name : "+e.target.name.toString()+"\n"+
"Type : "+e.target.type.toString()+"\n"+
"CreationDate : "+e.target.creationDate.toString()+"\n"+
"Size : "+e.target.size.toString()+"bites \n",
"File Informations");
}
}
private function browse(filter:FileFilter):void{

fileReference.browse([filter]);

}
]]>
</mx:Script>
<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"/>
</mx:Application>

No comments: