CFMU 2 quick updates

I got some good suggestions as far as additions go and thought I would throw in 2 quick ones in today. The first is being able to set a max file size in the settings file. By default the max file size is 0 and if you don't change it then its up to the flash player to set the limit. If the user tries to upload a file that is greater than the max file size (measured in bytes) they will get an alert telling them they have exceeded the limit. So once you set a file limit how do we implement it? First off we need to look at how the browse process works.

1.) User clicks browse button
2.) onBrowse Event handler method is called
3.) Create a file reference list
4.) Add a Select event listener
5.) Call the file reference list browse method

private function onBrowse(event:MouseEvent):void { _fileRef = new FileReferenceList(); _fileRef.addEventListener(Event.SELECT, onSelectFile); _fileRef.browse(_filters); }

Once the browse method is called the OS opens the open dialog box.  Once a user selects a file or files the onSelectFile method is called. Now we have to loop through a list of files, if the user only selects one file then we will only do 1 loop. For each iteration we check check to see if the max file size is 0 (default) if so we just add the file to the array collection. If its not we check to see if the size exceeds our limit. If it does we display a friendly error message letting the user know what happened.

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

The second update was to allow for removing of multiple files which I covered in the  last post

Removing items from a Data Grid

You may see many posts like this coming from me and to anyone who does Flex development will probably not get much out of them. With that being said for those of us still learning here is a quick tip for removing data from a data grid. In my latest project CFMU the browse button allows you to select a single file or multiple files to be uploaded. At the time I released the project the data grid did not allow multiple selections so if you wanted to remove an item before uploading you had to do it one at a time. This was pretty because all you had to do was reference the selectedIndex of the data grid. When the user selects a file the remove button is enabled and when the remove button is clicked the onRemove method is called.

private function onRemove(event:MouseEvent):void { _files.removeItemAt(dgFiles.selectedIndex); }

This worked great but a user suggested that he should be able to remove multiple items at once. I agree and this actually a pretty easy fix. The first thing we need to do is allow a user to select multiple files once they are added to the data grid. The data grid tag has an attribute allowMultipleSelection that accepts a boolean.

<mx:DataGrid id="dgFiles" width="100%" height="100%" dataProvider="{_files}" allowMultipleSelection="true"> <mx:columns> <mx:DataGridColumn headerText="File Name" dataField="name" width="{_nameColumnWidth}"/> <mx:DataGridColumn headerText="File Type" dataField="type"/> <mx:DataGridColumn headerText="File Size" dataField="size" labelFunction="bytesToKilobytes"/> </mx:columns> </mx:DataGrid>

Now that the user can select multiple files we need to update our remove method to delete multiple files. We know that calling selectedIndex will tell us what item is selected but the dg also has a property called selectedIndicies. As you can expect this will return an array of selected indexes. To update our remove method all we need to do is loop over that array remove each item.

private function onRemove(event:MouseEvent):void { var selected:Array = dgFiles.selectedIndices; for each(var i:uint in selected){ _files.removeItemAt(i); } }

CFMU File Filters

After a quick release this morning of my new multiple file upload component Todd Sharp pointed out that I should allow for custom file filters. I knew this would be an easy addition but I wanted to get out a alpha release this morning. When I got home I came up with a pretty quick but effective solution. So if your not familiar with what a file filter is I will give you a quick explanation. When you open a native file chooser on your OS you can control what types of files there are allowed to browse for.

In Action Script these are defined by using the FileFilter class. Here is a quick example of how you would do it, this was browse method before the change. The first argument is the description that is displayed to the user and the 2nd argument is an actual list of extensions using a semi colon delimiter that they can choose from. The important thing to notice is that the browse method takes an array of filters. If you have 1 its a single element if you had 0 it could be an empty array.

private function onBrowse(event:MouseEvent):void { var ff:FileFilter = new FileFilter("Images (*.jpg;*.gif;*.png)","*.jpg;*.gif;*.png"); _fileRef = new FileReferenceList(); _fileRef.addEventListener(Event.SELECT, onSelectFile); _fileRef.browse([ff]); }

Now that you know what they are and how they work I can show you how I made them dynamic. With the uploader component there is a xml settings file. In the settings file I added a filters attribute that looked this.

<filters> <filter> <description>Images (*.jpg;*.png;*.gif;*.jpeg)</description> <extensions>*.jpg;*.png;*.gif;*.jpeg</extensions> </filter> <filter> <description>ColdFusion (*.cfm;*.cfc;)</description> <extensions>*.cfm;*.cfc;</extensions> </filter> <filter> <description>Text (*.txt;*.doc;*.docx)</description> <extensions>*.txt;*.doc;*.docx</extensions> </filter> </filters>

Then I wrote a simple parser method to build the file filters array and return it back to my main application. The great thing here is that we are creating an empty array and returning that no matter what. This means if the user has no filters it will return an empty array and an empty array is basically attaching NO restrictions, the user can select what ever they want.

public function getFilters():Array { var filters:Array = new Array(); for each( var filter:XML in _xml.filters.filter){ filters.push(new FileFilter(filter.description,filter.extensions)); } return filters; }

Here is a quick screen shot of multiple file filters from my xml above.

ColdFusion MultiUploader (CFMU)

When Flex 2 came out there was a lot of buzz on how programmer friendly it was. At the time I thought it sounds great but what current problems of mine would it solve. I then came across an article by Ryan Favro titled Multiple file upload with Flex and ColdFusion. I saw a real problem being solved by Flex and I thought it was a fantastic program. The big problem is at the time I did not know how to use Flex so I could not really customize the component. Fast forward a couple years and I becoming pretty handy with Flex.

The first thing I have decided to release is a mutliple file uploader. The uploader component which I am calling cfmu (I know really original) for the time being should be available in the next couple days. In the meantime I could really use a couple people to test it so drop me a note if you can. The first version of this component will be customizable via a xml settings file. After I get this up and working I plan to build in some runtime css so you can style the whole component via stylesheet. The cool thing for cfers out there not really into Flex you can just drop the cfmu folder in your project root and use the following code.

<cfinclude template="cfmu/cfmu.cfm"/>

Here is a quick screen shot of the index test page that comes in the download. I have learned so much creating a bunch of small components like this and the first series will walk you through this component so you can understand how I created it. Also if you have not read the article by Ryan that I linked to above you should really check it out.