Removing cffileupload border

ColdFusion 9 introduced us to a built in flash based multi-file uploader, cffileupload. I just recently started using it and ran into something with it that I didn't like. The uploader has a background in it that you can't remove. When loaded the uploader looks like this...

If you notice there is a boarder around the upload control itself. If you look even more closely you will notice that it is a gradient. So, even if you set the background of the uploader to the background color of your site it would still appear. I tried several different methods using the cffileupload tag to remove it but none worked.

Then I started playing around with some css stuff. After a few trials and errors I ended up with this...

As you can see the border is gone. However, also gone, is the rounded corners. This was an acceptable compromise for me as I wanted the border gone more than I wanted rounded corners.

So how did I do it? Here is the code..

view plain print about
1<div style="overflow: hidden; width: 412px; height: 335px;">
2    <div style="overflow: hidden; margin-left: -6; margin-top: -7px;">
3    <cffileupload align="center" height="350" name="multiUploader" url="UploadHandler.cfm"
4     width="425" maxuploadsize="999" stoponerror="false" bgcolor="0078AE" wmode="transparent" title="File Uplaoder" >

5    </cffileupload>
6    </div>

Basically, I put it in a div that acts like a mask. I then move the div up and left using negative margins to hide the border. If you use this just adjust the height and width accordingly.

Till next time,


Installing ColdFusion Builder and Flash Builder 4 together

This may be documented somewhere but I did not find it. Also, those not familiar with Eclipse may not understand the terminology. So, here is how to install ColdFusion Builder and Flash Builder 4 together in 7 easy steps. These are written based off my experience when installing on both Windows 7 and MAC OSX. There are probably other ways to do this but this worked for me.

1: Download ColdFusion Builder. (for your OS)
2: Download Flash Builder 4, Plug-in version. (for your OS)
3: Run ColdFusion Builder installer and install as stand alone installation.
4: Close ColdFusion Builder if it started up post install.
5: Now run the Flash Builder installer. When it asks if installing as a plug-in or stand alone choose plug-in. In the directory selector browse and choose the ColdFusion Builder install directory. Complete the installation.
6: Open ColdFusion Builder.
7: After Builder is open choose window -> Open Perspective -> other. On the list should be "Flash", select it and click open.

You now have Flash Builder and ColdFusion builder running in the same IDE. If you quit Builder and reopen it will reopen your previous perspectives. If you are running the trial versions you will get a license warning from both perspectives.

Hope this helps.


Flash Conditional Operator

I was working on a flash application and wanted to concatenate a piece of static text with dynamic text. Instead of writing out this whole long thing to do it I figured I could pull it of using a conditional operator. For those that are unfamiliar a conditional operator in flash looks like this:

view plain print about
1var x:Number = 5;
2var y:Number = 10;
3var z = (x < 6) ? x: y;
4trace (z); // returns 5

So. This is what my code looked like. Taking a static piece of text and adding a conditional dynamic piece to the end.
view plain print about
1action_lbl.text = 'Action: ' + (selAction == 1) ? 'In':'Out';

However no matter what the var selAction actually was the text for action_lbl was always "In".
After doing some digging I found out that a conditional operator used in this fashion will always fail. I wrote a little test to confirm.
view plain print about
1thisTrace = 'something: ' + (5 == 1)? 'var 1':'var 2';
2trace(thisTrace); // returns "var 1";

Now after all this I am back to where I started.