FileUpload widget gwt

Question

I'm working on an application and I use gwt. I need to upload files (images) and for that purpose I use the FileUpload widget. When the user hasn't upload file the text in that widget is "No selected file", and I want to change that, but I dont know how to access that part of the widget.

Answer 1

FileUpload is rendered as a <input type=file> so you are going to see the default browser implementation for that widget. In fact if you use a different browser the text would be a different one or none.

Because of security reasons, most browser vendors have refused to offer ways to style file-input, so you have to use some hack to replace it by a customized button/div. etc. Hence there is no so much you can do to change that text.

I would recommend to use gwtupload , its DecoratedFileUpload widget comes with some tweaks to hide the default upload button and show a customized one to open the browse dialog, take a look to its examples .

Answer 2

I have tried the following and it's working fine in Mozilla FireFox 25.0.

In your css file define a new style:

.myfile {
  color: transparent;
}

Now apply this style to your FileUpload widget as follows:

fileUpload.setStyleName("myfile");

Hope it helps you.