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" >

14 comments:

Anonymous said...

Thanks Jay. Awesome explaination.

Anonymous 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.

Anonymous said...

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

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

Unknown 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

Unknown said...
This comment has been removed by the author.
C ohh as if c hb 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?

C ohh as if c hb 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?

Unknown said...

Many thanks Jay, you just saved me hours of research

Unknown said...

Call Girls In Delhi on reasonable price in Delhi.

Susan said...

Nice Post. It’s really a very good article. I noticed all your important points. Thanks. Find out who was born on any day in any month in history via our calendar of famous birthdays. Includes famous, historical, noteworthy and Celebrity birthdays.