Wednesday, July 16, 2008

Sample Flex File Upload Application

Recently I came across a thing where in I had to write a flex application which needs to upload file from the Client machine to Remote Application server, So I did some googling and came up with this simple demo application which explains most aspects of File upload functionality in Flex. I have tried to provide the inline comments in the below code to explain it. Refer http://livedocs.adobe.com/flex/2/langref/flash/net/FileReference.html for more information on Methods/events of FileReference package. Also, I found some cool multifile upload custom components but those were too complex for my need.

MXML/AS code of FileUpload:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;

// This is the main library package which provided APIs/Events for FileUpload

import flash.net.FileReference;

private var fileRef:FileReference = new FileReference();
private var fileTypes:Array = new Array();

//setup the filters (types of files to be browsed)

private var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)" ,"*.jpg; *.jpeg; *.gif; *.png");
private var documentTypes:FileFilter = new FileFilter("Documents (*.pdf), (*.doc), (*.rtf), (*.txt)",("*.pdf; *.doc; *.rtf, *.txt"));

// Set Up URLRequest

public var uploadURL:URLRequest = new URLRequest();

public function init():void
{
// This URL should be replaced with your server side URL

uploadURL.url = "http://localhost/CF/upload/upload.cfm";
uploadURL.method = "GET"; // OR "POST" as you need it
uploadURL.contentType = "multipart/form-data";

// Event Listeners for UI Buttons (Upload/Browse)

browsebutton.addEventListener(MouseEvent.CLICK, browseFiles);
uploadbutton.addEventListener(MouseEvent.CLICK,uploadFiles);
fileRef.addEventListener(Event.SELECT, selectHandler);


}

//Browse for files

private function browseFiles(event:Event):void
{
fileTypes.push(imageTypes);
fileTypes.push(documentTypes);
fileRef.browse(fileTypes);

}

// called after user selects a file form the browse window.

private function selectHandler(event:Event):void
{
FilePath.text = event.currentTarget.name.toString();
}

// called when user clicks on the Upload button to upload the file

private function uploadFiles(event:Event):void
{
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,dataHandler);
fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS,httpStatusHandler);
fileRef.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);
fileRef.upload(uploadURL);
}

// called after a file is uploaded

private function completeHandler(event:Event):void
{
Alert.show("File Uploaded successfully");
}

//called after file upload is done and Data has been returned from Server

private function dataHandler(event:DataEvent):void
{
resultsTxtField.text = event.data.toString();
}

// called if there is an error detected by flash player browsing or uploading a file

private function ioErrorHandler(event:IOErrorEvent):void
{
mx.controls.Alert.show(String(event),"ioError",0);
}
// called if a security error

private function securityErrorHandler(event:SecurityErrorEvent):void
{
mx.controls.Alert.show(String(event),"Security Error",0);
}
// server will return an http status code, code 200 means all is good

private function httpStatusHandler(event:HTTPStatusEvent):void
{
if (event.status != 200)
{
mx.controls.Alert.show(String(event),"Error",0);
}
}
]]>
</mx:Script>

<mx:Panel title="File Uploader">
<mx:ControlBar>
<mx:Spacer width="100%"/>
<mx:HBox>
<mx:TextInput id="FilePath" width="50"/>
<mx:Button id="browsebutton" label="Browse File" />
<mx:Button label="UpLoad File" name="uploadbutton" id="uploadbutton" />
</mx:HBox>
<mx:TextArea id="resultsTxtField"/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>


Code for [http://localhost/CF/upload/upload.cfm] would be something as below in case of ColdFusion



<cffile action="upload" destination="C:\Inetpub\wwwroot\uploadClientfilesHere\" accept="application/octet-stream" FILEFIELD="filedata" nameconflict="overwrite" >

21 comments:

Kandarp said...

Thanks Jay. Awesome explaination.

Kandarp said...

but actually it gives an error: #2038...if you can please pin to it!!!!!

Anonymous said...

Thanks, I am new to Flex, working on a project that's due--yesterday. You have saved me so much time! Thanks!

Anonymous said...

Does anyone know how to post the variable filedata with cfhttp? I have an asset manager on a different server I'm trying to populate. This is the only missing link.

jones said...

Nice blog...
visit also coldfusion example

Anonymous said...

Thank you very much for putting this code together. I just used it!

jackob said...

Wow this is AWESOME, soooo cool! I didn't even think this was possible! Definately donate!!!!
Thank You
ColdFusion Downloads

mike said...

bop inmate
movies on tv highway
harris county jail records
lino lakes prison
suspended license florida
drc inmate search
pedestrian crossing sign
sr22 california
parking lot stencils
alutiiq jobs
florida inmate lookup
monsey tours
inmate telephone service
drip torch
arizona arrest records
firefighter store
south carolina prison inmate search

SteveBrad said...

Good post. I study something tougher on totally different blogs everyday. It should at all times be stimulating to learn content material from other writers and follow a bit something from their store.
Buy Generic Viagra
cheap Generic Viagra

asif ifteakhar said...

Thank you for the great article I did enjoyed reading it, I will be sure to
bookmark your blog and definitely will come back from again.
I want to encourage that you continue your great job, have a good day

north london business oppotunities
london business group

premiumflag banners said...

Nice article you got here. It would be great to read more about this theme. The only thing it would also be great to see on this blog is some pictures of any gizmos.

feather flag
flag banner
custom flag banners

asif ifteakhar said...

Thank you for the great article I did enjoyed reading it, I will be sure to
bookmark your blog and definitely will come back from again.
I want to encourage that you continue your great job, have a good day

north london business oppotunities
london business group
london nwtworking groups
london business networking

DexSmart Matt said...
This comment has been removed by the author.
joana lui said...

It is great to observe somebody put enough craze towards a matter. I'm thankful that I stumbled upon this process. I am lucky I used the time to read on past the 1st paragraph. You have got a whole lot to say, very much to offer. I really hope guys understand this and look into your page.

safety deposit box
bank safety deposit boxes
mailbox post
residential mailboxes
gold bar for sale

Boris kreiman said...

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading what you all have to say


real estate law
how to buy a house
first time home buyer programs

golf stayz said...

Your article is extremely impressive. I never considered that it was feasible to
accomplish something like that until after I looked over your post .

فروشگاه کتاب
فروش کتاب
خرید کتاب
خرید اینترنتی کتاب
فروش اینترنتی کتاب
خرید کتاب اینترنتی
فروشگاه اینترنتی کتاب
فروش کتاب اینترنتی

DexSmart Matt said...

Nice post. It would be great to read more about this theme .

safe investment
forex investment
managed accounts
forex managed account
managed account
forex managed
pamm account
instaforex

Rohan Tilekar said...

hi. i have uploaded the same same cffile on server and in url have given the path of this cffile on server. it shows uploaded sucessfully but the image is not getting uploaded to the destination mentioned in cffile.what is the problem?

Rohan Tilekar said...

hi. i have uploaded the same same cffile on server and in url have given the path of this cffile on server. it shows uploaded sucessfully but the image is not getting uploaded to the destination mentioned in cffile.what is the problem?

Kenny Durojaiye said...

Many thanks Jay, you just saved me hours of research

aptibarta singh said...

Call Girls In Delhi on reasonable price in Delhi.