filter files in file picker

Question

How do I made it such that, without using flash or java applets, to filter files in the OS file picker using jsf (or primefaces)?
I'm talking something that can be done like with:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept

If I try to do like exemplified here:
http://www.primefaces.org/showcase/ui/fileUploadDnd.jsf
The file picker does not filter.

I don't care for compatibility for browsers that does not support this HTML attribute.

I'm interested in having the browser to output the correct HTML right from the start. If I can do it with plain HTML, I want to do it with plain HTML.

Answer 1

Without javascript:

You can do it by implementing a custom render for that component.. but It's not worth it...

With javascript,

As the multiple file upload component is a jQuery-File-Upload plugin, you can use the accept attribute of the file input field to limit the file type selection, The accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6.

An example limiting files to images using jQuery (Assuming your fileUpload widgetVar is fileUploadWV):

<script>
 $(function() {
  // setTimeout waits till the widgetVar is ready!
  setTimeout(PF('fileUploadWV').jq.find('input:file').attr('accept', 'image/*'), 2000);
 });
</script>

See more:

• Intro to PrimeFaces widgetVar
• How to restrict the file selection dialog to show only specific file types?

Hope this helps.