Modifiying default “Choose File” label of

Question

I would like to know if there is a method to label and rename the text displayed by JSF Choose a File when I'm using the tag <h:InputFile> in JSF.

Answer 1

That's not possible with native HTML. The appearance and the button's label is browser-dependent. The particular "Choose File" label is recognizable as the one from Chrome with English language pack (e.g. FireFox uses "Browse..."). As JSF is in the context of this question just a HTML code generator, it can't do much for you either.

There are several ways to achieve this. All can be found in this HTML+CSS targeted Q&A: Styling an input type="file" button, particularly this answer.

Easiest way is to reference it via <h:outputLabel for>, style it to look like a button and hide the actual file upload component. Clicking the label element will as usual just delegate the click event to the associated input element. See also Purpose of the h:outputLabel and its "for" attribute.

Here's a non-IE compatible kickoff example (it's supported in IE's successor Edge):

<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />

label.upload {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    padding: 2px;
    cursor: pointer;
}

input.upload {
    display: none;
}

If you'd like to support IE9+ too, replace appearance: button by a background and border. It's only harder to get it to look like a true button. The below is far from ideal, but should at least get you started.

label.upload {
    padding: 2px;
    border: 1px solid gray;
    border-radius: 2px;
    background: lightgray;
    cursor: pointer;
}

If you'd like to support IE6-8 too, which won't delegate the label's click event to the hidden input element, then well, head to the aforementioned related question for CSS tricks on that and rewrite JSF code in such way that it generates exactly the desired HTML+CSS(+JS) output.

A completely different alternative is to grab an UI oriented JSF component library, such as PrimeFaces which is based on jQuery UI. See also its <p:fileUpload> showcase.