Receiver of Upload Button Vaadin - file-upload

Question

I am trying to upload a file. It uploads fine, but while uploading it shows all file. I want to restrict to only selected files like pdf,jpg and jpeg files.
I need to while uploading a file when a browser window open that time only these files are visible remaining file should be hide. So that user is not able to select wrong file.
Can anyone tell me how can I do this?
I am using Vaadin 7.5.1 and Upload component and a Receiver.

Answer 1

The current Vaadin Upload component does not support this. There's an enhancement request for it which would be dead easy for Vaadin Inc (or a contributor) to implement now that all the major browsers support this functionality.
Here's the technical explanation: The Vaadin Upload component creates HTML like this:
<input type="file" name="foo">
but what you would have liked it to produce would be something like this:
<input type="file" name="foo" accept=".pdf,.jpg,.jpeg">
Here's how the above HTML will look in Firefox:
Basically the accept attribute will tell the browser to open a file selection dialog with a certain filter.
Note that this is a client-side thing. It doesn't prevent a savvy end user from uploading something that doesn't match your filter to your server. That goes for any kind of filtering done on the client-side no matter how it is done. For this reason you'll still need some server-side validation as well.

Answer 2

Piece of cake with JavaScript - you just have to check into the HTML source of page where that button/browse field is placed to find actuall class name of generated html element - this is example for .csv, Vaadin generates class name titled "gwt-FileUpload", so you have to set it like this to see only .csv files after clicking on "Import" button:
upload.setButtonCaption("Import");
JavaScript.getCurrent().execute("document.getElementsByClassName('gwt-FileUpload')[0].setAttribute('accept', '.csv')");

Answer 3

Add this dependency to your pom file
<dependency>
<groupId>com.wcs.wcslib</groupId>
<artifactId>wcslib-vaadin-widget-multifileupload</artifactId>
<version>1.10</version>
</dependency>
And use the following code to upload files, set filter using setAcceptFilter method:
UploadStateWindow uploadStateWindow = new UploadStateWindow();
uploadStateWindow.setOverallProgressVisible(true);
MultiFileUpload fileUpload = new MultiFileUpload(uploadFinishedHandler,
uploadStateWindow, true);
fileUpload.setAcceptFilter(".png,.jpg");
fileUpload.setImmediate(true);
fileUpload.getSmartUpload().setUploadButtonCaptions("upload", "upload");