how can I add event to richfaces fileUpload "on clear" - file-upload

Question

there are clear, clear all buttons on richfaces fileUpload component.
<rich:fileUpload id="quoteFile" tabindex="10" listHeight="80" maxFilesQuantity="1" onuploadcanceled=""
clearControlLabel=""
clearAllControlLabel=""
acceptedTypes="xml"
fileUploadListener="#{loadSaveQuotes.uploadListener}">
<a4j:support event="onuploadcanceled" action="#{loadSaveQuotes.clearUploadData}" reRender="footer" />
</rich:fileUpload>
all I want to are:
1, remove the both buttons so that end user cannot click it. as I set clearControlLabel to "", and clearAllControlLabel to "", but only clearControlLabel is hidden. still have clear All Control appear as [x] button and I still click it
2, if I cannot remove these button, so how do I take control of them. like add an event listener to that on clear event. I added an a4j:support event but it do not trigger when I click clear button.
many thanks for your contribute.

Answer 1

Add an a4j:support for 'onclear' JavaScript event. The code is self-explanatory:
<rich:fileUpload id="upload">
<a4j:support event="onclear" reRender="upload"/>
</rich:fileUpload>

Answer 2

You can hide these buttons through CSS, e.g. you can give your fileupload an additional class like
<rich:fileUpload styleClass="my-upload"> etc. </rich:fileUpload>
and then use CSS Specificity to overrule the appearance of this fileupload component:
.my-upload .rf-fu-btns-rgh, .my-upload .rf-fu-itm-rgh {
display: none;
}
You can choose any combination of selectors that has higher specificity then the original one from RichFaces. I find having an extra class the cleanest solution, as it would allow me to have "normal" and "modified" RichFaces components next to each other, only differing in their style class.
You can look up the RichFaces style classes of the elements you want to alter in the RichFaces component documentation or with your favourite website inspection tool.

Answer 3

I was having the same requirement. Hide Clear All button and Clear Link but only when the file is submitted for upload. I solved this requirement with dynamic css through JavaScript. Below is the example.
rich:fileUpload control
<rich:fileUpload id="excelUploader"
fileUploadListener="#{uploadUIController.excelFileUploadListener}"
acceptedTypes=".xls"
maxFilesQuantity="1"
noDuplicate="true"
ontyperejected="Wrong file type selected !"
serverErrorLabel="Invalid file type selected !"
listHeight="100px"
doneLabel="Excel Upload Completed !"
onfilesubmit="showHideClearLink()"
styleClass="fileUploadClass"/>
Javascript code at the top of the file...
<script type="text/javascript">
function showHideClearLink()
{
var styleSheet = document.createElement('style')
styleSheet.innerHTML = ".fileUploadClass .rf-fu-btns-rgh, .fileUploadClass .rf-fu-itm-rgh {display: none;}";
document.body.appendChild(styleSheet);
}