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>
7</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,

--Dave