Real World Flex/ColdFusion: Part 11

This will be the last post in this series. While I will continue to add features to this project and share the details with you, I wanted to find a clear line where I could close this series. The last feature is probably the most important. What good is a file manager if you can't upload new files. This post will cover the upload component.

First we are going to create a new file components/RocketUploader. The component we are creating is going to be based on a Title Window because we are going to launch the uploader as a popup from our application. The layout of the component is pretty simple. I know we talked about layouts at the beginning of this series and I am doing the exact opposite of what I preached but I just like the look and feel of the panel component here. In the panel we have some buttons, a data grid to display the files and progress bar to show file upload progress. <?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" showCloseButton="true"> <mx:Panel id="container" title="{titleBarText}" width="100%" height="100%" titleIcon="@Embed('assets/images/image.png')" backgroundColor="#f2f2f2"> <mx:HBox width="100%" backgroundAlpha="0.0"> <mx:Button id="btnBrowse" label="Browse" click="onBrowse(event)" icon="@Embed('assets/images/add.png')"/> <mx:Button id="btnRemove" label="Remove" click="onRemove(event)" icon="@Embed('assets/images/delete.png')" enabled="{dgFiles.selectedIndex > -1}"/> <mx:Spacer width="100%"/> <mx:Button id="btnUpload" label="Upload" click="onUpload(event)" icon="@Embed('assets/images/image_add.png')" enabled="{_files.length > 0}"/> </mx:HBox> <mx:DataGrid id="dgFiles" width="100%" height="100%" dataProvider="{_files}" allowMultipleSelection="true"> <mx:columns> <mx:DataGridColumn headerText="File Name" dataField="name"/> <mx:DataGridColumn headerText="File Type" dataField="type"/> <mx:DataGridColumn headerText="File Size" dataField="size" labelFunction="bytesToKilobytes"/> </mx:columns> </mx:DataGrid> <mx:ControlBar> <mx:Label id="txtStatus" text="{statusBarText}" width="200"/> <mx:ProgressBar id="uploadProgressBar" width="100%" labelPlacement="center" trackHeight="20" mode="manual" enabled="{_files.length > 0}" label="{progressBarText}" color="#3B6BBF"/> </mx:ControlBar> </mx:Panel> </mx:TitleWindow>

To upload a file you will click on the browse button, select some files and click the upload button. To present the user with a browse dialog box we will work with the FileReference class. When the user selects a file or files the onSelectFile method is called. For each file that was selected we will loop through and add it to our _files array. private function onBrowse(event:MouseEvent):void { _fileRef = new FileReferenceList(); _fileRef.addEventListener(Event.SELECT, onSelectFile); _fileRef.browse(fileFilters); } private function onSelectFile(event:Event):void { for (var i:uint = 0; i < event.currentTarget.fileList.length; i ++){ // before we add it to the collection, check the file size restrictions if(_maxFileSize == 0) { _files.addItem(event.currentTarget.fileList[i]); } else if(event.currentTarget.fileList[i].size > _maxFileSize){ Alert.show("The file " + event.currentTarget.fileList[i].name + " exceeds the max file size of " + _maxFileSize, "File Size Error") } } }

When the user clicks the upload button we are going to call the on upload method. For each file in the list we are going to push the file to our File Manager component method upload. The important thing to notice here is that one of the events we can listen for is the complete event. In our complete event handler we are going to remove the item from the data grid and dispatch a new custom event to our application. The custom event basically tells our application that we need to update the file listing and we will push the path along with the event. private function onUpload(event:MouseEvent):void { var request:URLRequest = new URLRequest(uploadURL); var params:URLVariables = new URLVariables(); params.path = uploadDir; request.method = URLRequestMethod.POST; request.data = params; for(var i:uint = 0; i < _files.length; ++i) { try { _files[i].addEventListener(Event.COMPLETE,uploadComplete); _files[i].addEventListener(ProgressEvent.PROGRESS,monitorProgress); _files[i].addEventListener(IOErrorEvent.IO_ERROR,handleError); _files[i].upload(request); } catch(e:Error) { // generic error handling Alert.show("Error: " + e); } } } private function uploadComplete(event:Event):void { _files.removeItemAt(_files.getItemIndex(event.target)); // refresh the directory dispatchEvent(new RefreshFileListEvent("refreshFileList",uploadDir)); }

Back in our main application we need to set a click handler for the upload button. In the openUploader method we are creating an instance of our RocketUploader and adding it to the screen using the popup manager. Another cool little lesson here is figuring out what to set the width and height of our uploader. Usually you can set a percentage width but here what don't know what width is so this won't work. What we want to do is figure out what the stage size is and take about 60% of that. private function openUploader():void { var ru:RocketUploader = new RocketUploader(); ru.titleBarText = "Rocket Uploader"; ru.statusBarText = "Click browse to select file(s)"; ru.uploadDir = tree.selectedItem.path; ru.uploadURL = "http://localhost/rocketfm/src/org/vega/FileManager.cfc?method=upload"; ru.fileFilters.push(new FileFilter("Images (*.jpg;*.png;*.gif;*.jpeg)","*.jpg;*.png;*.gif;*.jpeg")); ru.width = stage.width * .60; ru.height = stage.height *.60; ru.addEventListener(CloseEvent.CLOSE,closeUploader); // add the rocket uploader as a popup window PopUpManager.addPopUp(ru,DisplayObject(Application.application),true); PopUpManager.centerPopUp(ru); }

With that I think we are going to end this series. You can check out a screen shot below of the upload component in action. I will posting more updates to the application in the near future but for now you can grab the code from svn over at http://rocketfm.riaforge.org. Please feel free to contact me with any questions or problems that you run into.