Ellis Giles

This is a great example of a file uploader for Adobe Flex.  It’s in com.everythingflex.components.Uploader.mxml.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Authored by Rich Tretola (rich@richtretola.com) EverythingFlex.com
Feel free to use within your appplications.  Track changes at EverythingFlex.com

Sample Syntax:
<eFlexComponents:Uploader uploadButtonLabel=”Browse for New Image”
uploadToURL=”http://www.yourdomain.com/uploads/uploader.cfm”
imagesFilter=”*.jpg;*.gif;*.png”
displayNewImage=”true”
displayImagePath=”http://www.yourdomain.coms/uploads”
maxUploadSize=”100000″/>

–>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml” width=”100%” height=”100%”>
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.controls.Alert;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.net.URLRequest;

private var uploadURL:URLRequest;
private var file:FileReference;

[Bindable]
public var uploadButtonLabel:String = “Browse for New Image”;
public var uploadToURL:String = “”;
public var imagesFilter:String = “*.jpg;*.gif;*.png”;
public var displayNewImage:Boolean = true;
public var displayImagePath:String = “”;
public var maxUploadSize:Number = 100000000;

public var fileName:String;

public function getFile():void {
if(this.uploadToURL.length > 0){
this.uploadURL = new URLRequest();
this.uploadURL.url = this.uploadToURL;
this.file = new FileReference();
this.configureListeners(file);
this.file.browse(new Array(new FileFilter(”Images”, this.imagesFilter)));
} else {
Alert.show(”uploadToURL is undefined”, “Syntax Error”);
}
}

private function configureListeners(dispatcher:IEventDispatcher):void {
dispatcher.addEventListener(Event.COMPLETE, completeHandler);
dispatcher.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
dispatcher.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
dispatcher.addEventListener(Event.SELECT, selectHandler);
}
private function selectHandler(event:Event):void {
this.file = FileReference(event.target);
this.fileName = file.name;
this.file.upload(uploadURL);
this.uploadButton.visible = false;
this.progressBar.visible = true;
}
private function completeHandler(event:Event):void {
if(this.displayImagePath.length > 0 && this.displayNewImage == true){
this.newImage.source = this.displayImagePath+’/'+this.fileName;
this.BTN_fileDownload.label = “Try Download”;
this.BTN_fileDownload.visible = true;
this.fileDownloadsuccess.text = “Successfully Uploaded”;
this.fileDownload.text = this.fileName;
this.fileDownloadurl.text = this.displayImagePath+’/'+this.fileName;
/*var u:URLRequest = new URLRequest(”{this.displayImagePath+’/'+this.fileName}”);
this.BTN_fileDownload.change =”navigateToURL(u,’_self’)” */
}
this.progressBar.visible = false;
this.uploadButton.visible = true;
}
private function progressHandler(event:ProgressEvent):void {
if(event.bytesTotal > this.maxUploadSize){
this.cancelUpload();
Alert.show(”Max size allowed: ” + this.maxUploadSize + ” bytes. \nYour file is ” + event.bytesTotal + ” bytes”, “Upload cancelled, File too large”);
} else {
this.progressBar.setProgress(event.bytesLoaded,event.bytesTotal);
this.progressBar.label = event.bytesLoaded + ” of ” + event.bytesTotal + ” bytes loaded”;
}
}
private function ioErrorHandler(event:IOErrorEvent):void {
Alert.show(”ioErrorHandler: ” + event, “IO Error”);
}
private function securityErrorHandler(event:SecurityErrorEvent):void {
Alert.show(”securityErrorHandler: ” + event, “Security Error”);
}
private function cancelUpload():void{
this.file.cancel();
this.progressBar.visible = false;
this.uploadButton.visible = true;
}
private function linkTo():void{
var linkurl:URLRequest = new URLRequest(this.fileDownloadurl.text);
navigateToURL(linkurl,”_self”);
}
]]>
</mx:Script>
<mx:Button id=”uploadButton” click=”this.getFile()” label=”{this.uploadButtonLabel}” visible=”true” />

<mx:ProgressBar width=”200″ id=”progressBar” mode=”manual” visible=”false”/>

<mx:VBox x=”10″ y=”30″>
<mx:Image id=”newImage” visible=”false”/>
<mx:Text id=”fileDownloadsuccess”/>
<mx:Text id=”fileDownload”/>
<mx:Text id=”fileDownloadurl”/>
<mx:Button id=”BTN_fileDownload” visible=”false” label=”Download” click=”linkTo()”/>
</mx:VBox>

</mx:Canvas>

Filed under: Technology | Tagged: Adobe, Adobe Flex, File Upload, Flash, Flex