Uploadify button: Style with CSS?

Question

Is it possible to replace the Uploadify button (which is a graphic containing up/over/down states) with a simple CSS-styled button?

Answer 1

I've been able to come up with a working solution to this. Here's the basic outline:

• Disable the Uploadify button image buttonImg: " "
• Make the flash object transparent wmode:"transparent"
• Using CSS, position a fake styled button or a tag behind the flash object
• After initializing Uploadify, set the width and height of the object to match the button behind it

The flash object will shield the button underneath it from mouseover etc. events; so to get hover effects, you'll need to take a couple of additional steps:

• Wrap both the button and the upload object in a div
• After initializing Uploadify, set the width and height of the wrapper div to match the button
• You can then use jQuery to handle the .hover() events on the wrapper div and apply styles to the button

Putting it all together:

HTML

<div class="UploadifyButtonWrapper">
    <a>Upload Files</a>
    <div class="UploadifyObjectWrapper">
       <input type="file" id="Uploadify" name="Uploadify" />
    </div>
</div>

CSS

div.UploadifyButtonWrapper{
    position:relative;
}

/* fake button */
div.UploadifyButtonWrapper a {
    position:absolute; /* relative to UploadifyButtonWrapper */
    top:0;
    left:0;
    z-index:0;
    display:block;
    float:left;
    border:1px solid gray;
    padding:10px;
    background:silver;
    color:black;
}

/* pass hover effects to button */
div.UploadifyButtonWrapper a.Hover {
    background:orange;
    color:white;
}

/* position flash button above css button */
div.UploadifyObjectWrapper {
    position:relative;
    z-index:10;
}

Javascript:

$("input.Uploadify", self).uploadify({
    ...
    buttonImg: " ",
    wmode: "transparent",
    ...
});
var $buttonWrapper = $(".UploadifyButtonWrapper", self);
var $objectWrapper = $(".UploadifyObjectWrapper", self);
var $object = $("object", self);
var $fakeButton = $("a", self);
var width = $fakeButton.outerWidth();
var height = $fakeButton.outerHeight();
$object.attr("width", width).attr("height", height);
$buttonWrapper.css("width", width + "px").css("height", height + "px")
$objectWrapper.hover(function() {
    $("a", this).addClass("Hover");
}, function() {
    $("a", this).removeClass("Hover");
});

Answer 2

I was able to get away with something massively more simple.

xhtml:

<div id="uploadify">                  
  Upload Pictures                     
  <div id="uploadify" type="button" />
</div>                                

css:

#uploadify object { 
  position:absolute;
  left:0; right:0;  
  width:100%        
}                   

javascript:

$("#uploadify>div").uploadify({                     
  'hideButton'   : true                                
  , 'wmode'      : 'transparent'                         
  , 'uploader'   : '/static/uploadify/uploadify.swf'
  , 'script'     : '/static/uploadify.php'          
  , 'folder'     : '/_uploads'                      
  , 'multi'      : true                             
})                                                  

If you're using jQuery UI.
$("#uploadify").button(); 

Probably a little easier, now that we have hideButton: true, not sure if @Herb knew about it.

Answer 3

The only problem with the above solution is that it doesn't degrade gracefully. You've removed the file input all together, leaving non-Flash users stranded.

Answer 4

@Evan

Your solution is easy indeed, thanks for that, helped me a lot.

One thing I noticed for my case is that $("#uploadify>div").uploadify({ needed to be $("#uploadify>span>div").uploadify({