CFMU on complete advanced example

In the last example I introduced you to the on complete attribute for CFMU. Today I want to take it a step further and sprinkle in some jQuery magic. Before we look at some code we should take a look at what we are trying to accomplish. When the uploader loads we are going to add some files to it.

After we hit upload and the files are uploaded we will display our results to the right of the uploader.

[More]

CFMU on complete attribute

The next feature of CFMU I want to go over is the on complete attribute. This allows you to define a JavaScript method name that will be called after the files have been uploaded. This will run every time you upload a single file or a batch of files. In addition to calling the method of your choice it will also pass an array of the files that were uploaded and will contain the following info about each file.

• creationDate
• creator
• modificationDate
• name
• size
• type

[More]

CFMU File Filters

CFMU is a multiple file upload custom tag written for ColdFusion in Flex. This is a much easier way to allow users the ability to upload files in your applications. If it is only 1 file it really is not a big deal but when you need to add many files this custom tag really comes through. Over the next couple of weeks I want to keep walking you through the many features this tag has to offer as well as how the code on the Flex side works.

Today we are going to walk through file filters. A file filter is a way to restrict what kind of files a user can select when clicking the browse button. This firstre image is the custom tag rendered to the screen along with the little code it takes. <cf_uploader id="filter-uploader" title="My Image Uploader" width="400" height="300" url="../demo/uploader.cfc?method=upload" dir="#expandPath('.')#\images\">

[More]

CFMU is back and better than ever

A while ago I started a project code named CFMU. The name was clearly some of my best work yet because it stood for ColdFusion Multi Uploader. I wanted to be able to quickly add a multiple file uploader in my applications and i wanted to be able to display progress to the user so naturally the Flash platform was a good fit. I had written many uploader components in Flex before so it was a fun little project.

Since the initial release I have got a ton of feedback and most of the issues were related to installation and usage issues. The customization was done via an XML file and quite frankly it did not work as well as I wanted it to. I decided to re write this project so it was easier to use and I think I have come through. I have turned it into a custom tag so all customizations are done by passing tag attributes and I was able pass all of the settings to the application using flash vars.

[More]

CFMU Updates coming soon

I am working on some updates and I wanted to find out from anyone using what they do / do not like about the product. Some people have expressed they don't like the static xml file settings. We could probably change that by passing using s cfm template instead of the xml file or flashvars but I am just throwing ideas out right now. If you need anything let me know!

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.