Question

I use jQuery UI around my site and am wondering how I can use the style for an upload button rather than the standard gray uploadify button.

JavaScript:

<script type="text/javascript">
$(document).ready(function() {
        $("button").button();
        $("input:button").button();
        $("#file_upload").button();

  $('#file_upload').uploadify({
    'uploader'  : 'files/uploadify.swf',
    'script'    : 'files/uploadify.php',
    'cancelImg' : 'files/cancel.png',
    'folder'    : 'uploads/',
    'auto'      : false,
    'multi'     : true,
    'buttonText'  : 'Choose Pictures',
    'onAllComplete' : function(event,data) {
      alert(data.filesUploaded + ' files uploaded successfully!');
    },
    'hideButton'  : true
  });
});
</script>

HTML:

<form id="upload_images" name="form1" action="">
<input type="file" id="file_upload" name="file_upload" />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>
</form>

Is this possible? I tried using the buttonimg option but that didn’t seem to have very good results as I couldn’t see any text over the “button”. As you can see below I also am trying the hidebutton option, but this just hides the gray button. Any ideas?

Answer 1

After downloading the package Uploadify, it seems like the grey button was implemented using Adobe flash. If you try checking the button in Firebug, you’ll see that it’s an embedded flash object.

Sorry, don’t think there’s any solution to your problem.