File Upload Control and GWT Look and Feel

I'm writing my first GWT project. I have a form with label, file upload control and upload button but they look awful and too different in various web browsers. Also button from file upload control doesn't have the same style like GWT开发者_运维技巧 button control. And the other problem is that in Chrome Button for file choose is on the left?!?

What I can do about it?

File Upload in Internet Explorer:

File Upload in Firefox:

File Upload in Chrome:

---

The <input type="file"> WILL look different in different browsers. This is the way they and we have to live with it.

But I don't think this is something to really worry about. If someone chooses to work with a browser, they decide the work with the browser's look and feel, which includes the rendering of <input type="file">.

It is also not possible to change the button styles of this control (in a decent/clean manner).

In my opinion you can leave them the way they are. For me the <input type="file"> is some sort of a system control owned by the system (the browser), and not the programmer. You cannot also decide which files to display and what not to (eg., filter and display ".doc" and ".docx" and nothing else is not possible)

If for some reason you really really need a single uniform interface: some websites use a picture of a button and use flash to display the file open box. This relies on the presence of flash though. I remember (2 years old memory) there was a control in YUI for this kind of file input (based on flash), perhaps there is a similar one in GWT. I am not very sure though.

---

Unfortunately, this is how the <input type='file' /> renders in various browsers. The FileUpload widget just wraps that input type.

If you'd like to have some consistent file upload UI, you could potentially do something like the following.

• Create some styled button for file uploading.
• Somehow (not sure how), catch the click event and have a hidden FileUpload widget open the browse dialogue somehow.
• Display what file they chose by calling the getFilename() from the hidden FileUpload widget.

I'm really not sure if that'll work but it's a possible way to solve this problem.

---

There's an article on quirksmode which shows a solution that uses a CSS trick to overlay the input field with basically anything you like.

I'm not sure, if I really want to recommend that technique, because it looks like a nasty (though good-looking) trick to me. I also imagine, that some browsers could use defense mechanisms against that technique, as it may look related to Clickjacking.

---

Another easy way of doing this. Make a "input type file" tag in html and hide it. Then click a button and format it according to need. After this use javascript/jquery to programmatically click the input tag when the button is clicked.

HTML :-

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JAVASCRIPT :-

$('#button').click(function(){
    $('#file').click();
});

CSS :-

#button
{
    background-color: blue;
    color: white;
}

Here is a working JS fiddle for the same :- http://jsfiddle.net/32na3/