Questions about the upload component

Hello vaadiners

I would like to make a small forum application with vaadin

Imagine an app exactly like this forum :wink:

But I dont know how to integrate the upload component with other fields

My usecase is exactly the same as in case of this forum:

  • 1 have a textfield/textarea for the textual part of the comment
  • and I would like to have an upload component to make it posible to attach one or more files to the comment
  • and of course there is a save /send button

So when I click on the send button the text comment gets transfered to the server, and the selected file ( if the user seledted any) gets uploaded to the server

How to do this in vaadin?

How can I tell the upload component to start uploading the selected file ( if it is not empty) when I click a button?

Or from another point of view what kind of event exactly fired when I click the upload button of the upload component?

This kind of functionality is a must in our project, and vaadin is an excellent tool for our project, and I have been able to solve everything requested by the client except for this one…

Thanks for your help and attention, in advance



If you think about the problem a bit from the end user’s view, and not just from a technical point of view, you would see other solutions. Here’s my suggestion:

Instead of initiating the upload when the user clicks send, use the immediate upload component, and receive the file upload in the background right after the user adds the attachment to the post (provide upload feedback using the progress indicator). This way the user can write the post while the attachments are uploading. The user doesn’t really care when the files are uploaded (before or after she presses send), she just wants to attach some files.

What I’m trying to describe is actually exactly how Gmail handles email attachments. Just copy that pattern and you’re fine, since it can be done with core Vaadin components.

The alternative you’re wishing to implement is a relic from traditional web page style applications. With modern browsers and Ajax-goodness we can make the user experience much smoother.


I think gmail is a good example :slight_smile: I think I can adapt that scenario too! :slight_smile:

Of course I always try to be as user friendly as posible, but as a programmer I have to find out how to do that, and it is not always trivial :slight_smile: so I need some help/ideas

I have a php/mysql and of course html/css/javascript background I consider myself rather a developer than a designer :slight_smile:
I have done traditional web pages/some ajax stuff/and even some dinamic (database backed ) flash applications. And everything is a bit different , and there are a lot of diferent ways to solve the same problem :slight_smile:

And I think vaadin is an excellent tool We ( me and my colleagues ) mainly choose vaadin because my colleagues have desktop/C# background and with vaadin it was posible to create web application without html/css/javascript only in pure java so they could help me with the job :slight_smile:

Thanks for your help!

Great that this solution was right for you! The other option would’ve required some more work, I think, so all the better :slight_smile:

Figuring out the users’ needs is always tricky, I agree, and it almost always helps to get outside opinions to solutions.

I also need the upload component to start uploading at an outside trigger. I understand that background uploading is a better user experience but here’s a scenario where that might be a problem. If a user selects a file and it starts uploading right away and the user later decides NOT to send the message, then that uploaded file will be obsolete and it will have to be deleted by some kind of a scheduler which is what I don’t want.
I tried using the UploadField from EasyUploads add-on but that also has its own problems.
All I want is a submit() method in the standard Upload component that performs the same action as the upload button. Please help!

Old thread, but worth pointing out, that the you can now initiate the upload programmatically by using the Upload.submitUpload() method: