This was supported in RF 3.3. But to save time for migrating RF 4.0, among others, <rich:fileUpload> received far less attention than it deserves. Currently, there are many open tickets to improve it.
Until they improve it, your best bet is to bring some custom jQuery / JS and CSS to achieve functional requirements for selecting and loading only one file.
This script does not allow the end user to upload multiple files, hiding the add button when the file is already selected:
jQuery.extend(RichFaces.ui.FileUpload.prototype, { __updateButtons: function() { if (!this.loadableItem && this.list.children(".rf-fu-itm").size()) { if (this.items.length) { this.uploadButton.css("display", "inline-block"); this.addButton.hide(); } else { this.uploadButton.hide(); this.addButton.css("display", "inline-block"); } } else { this.uploadButton.hide(); this.addButton.css("display", "inline-block"); } } });
Make sure the above JS is loaded after the default RF scripts (which jQuery already includes). You can do this with <h:outputScript> in the body, which you can optionally set with target="head" .
This CSS limits the height of the file list and removes the bottom border of an individual element:
.rf-fu-lst { height: 60px; } .rf-fu-itm { border: 0; }
Make sure the above CSS is loaded after the default RF styles. You can do this with <h:outputStylesheet> in the body (so don't put it in the head).
And how do I call a method in my managed bean (which sends the image to my Amazon S3 bucket) after the download is complete?
Just do the job in the listener method, which is bound to the fileUploadListener attribute.
<rich:fileUpload fileUploadListener="#{bean.upload}">