How do I use a link instead of the browse button to attach a file?

Question

I have a form like the following:

<form id="submit_idea" name="submit_idea" method="post" action="">
  <a class="attach" title="Attach a file" onclick="clickAttachment()"
     href="javascript:void(0)">Attach File</a>
  <span id="id_filename"/>
  <input id="id_attachment" type="file" name="attachment"/>
  <input class="submit_btn" type="image" alt="Submit Idea" src="/static/img/submit_idea.png"/>
</form>

And the associated javascript that goes along with it.

function updateAttachment() {
    var val = $("#id_attachment").attr("value");
    if (val) {
        var name = val.split('\\');
        $("#id_filename").html(name[name.length - 1]);
    }
    else {
        setTimeout(updateAttachment, 500);
    }
}

function clickAttachment() {
    jQuery('#id_attachment').click();
    setTimeout(updateAttachment, 500);
}

This works great for IE, but does not work at all for FireFox 3.5.1. Is there another way to get the same result in FF 3.5.1 or later with just using dhtml/javascript (no Flash, etc.)?

We can use CSS to dress up the "Attach File" link, but we can't change the layout of the browse button FireFox puts up for the form. The IE solution lets us via a proxy click the button to browse for a file, but that does not work under FireFox.

Thanks in advance, -peter

Answer 1

Here's what you're looking for, I believe

Styling an input type="file"