Search code examples
jsf-2primefaces

Is there a way to hide the Primefaces fileUpload progress bar and buttons in advanced mode and auto mode?


Is there a way to hide the Primefaces fileUpload progress bar and buttons in advanced mode and auto mode?

Here is the code that I am using:

<p:fileUpload id="scriptUpload" 
                        widgetVar="importDevicesWidget" 
                        fileUploadListener="#{scriptUploadBean.handleFileUpload}"
                        auto="true"
                        label="Choose.."
                        mode="advanced" 
                        update=":infoMessages"
                        sizeLimit="8192" 
                        allowTypes="/(\.|\/)(txt)$/"
                        onstart="clearInvalidFileMsg();$('#progress').show();"
                        oncomplete="clearInvalidFileMsg();$('#progress').hide();importDevicesDialogWidget.hide()"/> 

The problem is that it makes no sense for the buttons that appear next to the progress bar for each file to be there as the mode is auto so the upload already started!

Here is a screen shot:

enter image description here


Solution

  • According to the 3.4 documentation .ui-fileupload .start, .ui-fileupload .cancel and .ui-fileupload .progress selects your fileuploads' start, cancel and progress bar:

    <style type="text/css">
        .ui-fileupload .start {
            display: none;
        }
        .ui-fileupload .cancel {
            display: none;
        }
        .ui-fileupload .progress {
            display: none;
        }
    </style>