GMail Style file upload buttons using GWT

[pappu]

Hi Team,

I have developed a application using GWT and this application has a
form with file upload buttons.There are a couple of problems with
fileupload buttons in general:

1) The browse button has a text box and button beside.

2) The client doesnt understand its functionality and is typing some
non-sense instead of typing the exact file path or the browse button
due to which the form doesnt get submitted.

3) I want to have a browse button of the GMail style where there is no
text box beside a browse button.So the user has no option to type
manually but only browsing for the file...

Please can some one help me in this regard.

[Carl Scott]

GWT uses a specific CSS styling for the button and the textbox of
FileUploadWidget (I forget what it is, but it is documented). You can
probably use CSS to hide that textbox.

Hope that helps,

--
Carl Scott
Software Developer, Solertium Corporation

[Sean]

I'm not sure what you mean by 3.

In Gmail using FireFox for me, you click a HyperLink to attach a file,
and then it shows a text box with a Browse Button. So if I was doing
it in GWT, I'd make a Label with text: Attach a file, use CSS to make
it blue and underlined with cursor hand,pointer. Add a click listener
that on click, set the Label to invisible (or change text to Attach
Another File) and add a FileUpload to a VerticalPanel.

And what do you mean by nonsense in #2? Can you be more specific? When
I just insert the code from the JAVADOCs for FileUpload, I am able to
pick any file on my system and have it show correctly in the textbox.

Code taken from:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/index.html

On Mar 20, 1:09 am, pappu <pavan.pa...@gmail.com> wrote:

[El Mentecato Mayor]

By #3, I think he means that he wants the textbox to not appear.
That's not possible AFAIK, at least in all browsers supported. The
file upload HTML tag has some limitations; 1) you cannot separate the
text box from the browse button, 2) you cannot add styles to them and
3) you cannot select more than one file at a time. A workaround to the
first two issues could be putting a panel/element on top of them to
hide them using a DeckPanel . A workaround for the last issue involves
using a plugin (java applet, flash, your own) or signed javascript.

Gmail DOES display the textbox of the upload html element.

#2 - give more details

[David]

The trick is probably to have a Upload Widget hidden and use a regular
Button widget. When the user clicks on the Button, invoke a click on
the hidden Upload Widget button. That should be possible.

[pappu]

Yes i used CSS to hide the text box by making the border color of the
Text box same as the background of the form in which it is placed.Also
I reduced the text box size to 1em.

But this is not what i intend to do I am trying to do something which
is there in GMAIL where if you want to upload a file for sending a
email you just click a button called attach and the file dialog
appears.

Something like this: http://digitarald.de/playground/uplooad.html

> > Please can some one help me in this regard.- Hide quoted text -
>
> - Show quoted text -

[pappu]

I wanted something like this: http://digitarald.de/playground/uplooad.html

[pappu]

The problem here is client is not using browse button for uploading
files he is just typing in some text in the text box.For suppose if
the label for the browse button is Upload List they are typing the
list of email addresses instead of uploading a file using the browse
button......

On Apr 8, 7:02 pm, El Mentecato Mayor <rogelio.flo...@gmail.com>
wrote:

[pappu]

I got this idea but the problem is FileUpload widget in GWT doesnt
have any listener methods or proper method to do this...

[David Given]

pappu wrote:
> I wanted something like this: http://digitarald.de/playground/uplooad.html

However it works, it does so rather badly; when I looked at this page,
the text box first appeared briefly and then vanished; and when I
pressed 'Reload', it came back again...

This is with a completely vanilla Firefox 3b5 on Windows, too.

--
David Given
d...@cowlark.com

[Adam T]

pappu,

You're running into standard browser issues not GWT.

1) As others have said, the text box is standard for Browsers
(however, IE does allow you break the rules and allows you to
programatically click a File input on a form (usually hidden), but
this is hardly cross browser)

2) Guess you will just have to train users - though most that have
used web before should know. Can you not do a check on filename
before submitting to check there is a "/" symbol and if not then
suggest user clicks the Browse button (not exactly robust, but might
help)

3) See (1) above, i.e. have a hidden form that you use JSNI to click
the File input when you click on some text in your application. But
outside IE it will not work.

If you look into the digitarald example you reference that actually
replaces the HTML File input with a Flash component, which is how it
"hides" the text box of the HTML File widget (and allows multiple
files to be selected at once).

Alternatively, the code here (http://groups.google.com/group/Google-
Web-Toolkit/browse_thread/thread/19ea5c6be6d47848/8a4439de9cd48006?
lnk=gst&q=fancy+file+upload) might help/give some inspiration. It is
not exactly what you are after, but you could set the start message to
say "Click here to add files (and then use Browse button)" or
something similar.

Hope some of that helps

//Adam

[David]

Hi,

As said previously: put the FileUpload widget as a hidden element.
Then add a button or link on your page with an onclick listener that
calls JSNI code:

final FileUpload upload = new FileUpload();
upload.setName("uploadFormElement");
panel.add(upload);

panel.add( new Button("Select File", new ClickListener() {
public void onClick(Widget pSender) {
jsClickUpload( upload.getElement() );
}
}));

where jsClickUpload is something similar to:
native void jsClickUpload( Element pElement ) /*-{
pElement.click();
}-*/;

I don't know if this is supported in all Browsers, there must be
similar solutions since GMail is capable of doing this.
I tried this on IE6 and it works. I guess there are similar things
available in FireFox or Safari/WebKit.
Of course you lose the possibility of drag and drop of files as
supported in Safari.

It would be a nice addition that we can trigger the File dialog in the
standard FileUpload widget (depending on the browser type).

David

[pappu]

Hi David,

Thank you very much this worked well but what if i want to reset the
value of the filename in the FileUpload widget.There is no
setFilename() method in it.

My requirement is if the remove button is clicked then i want to reset
the file name in the FileUpload widget.

Can you please help me in wirting a JSNI for it.

Thanks,
Pappu.

> > > - Show quoted text -- Hide quoted text -

[David]

Hi,

Browsers do not support you to set the filename from javascript, that
would be a security problem.

But what you can do, is just remove the FileUpload widget from the
form and add a new one every time you want to add a file to the
upload.

David

[Pavan Pappu]

Hi David,

 

Is there any way to create a reset a button as in HTML using which we can reset all the fields in the current form including this FileUpload widget.
 

Thanks,

Pappu.
 

[David]

Hi,

Call form.reset() from JSNI.

But then you will reset everything not just the Filename,

David