Geek Answers Handbook

Is there a way to hide the Primefaces fileUpload indicator line and buttons in advanced mode and in automatic mode?

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

Here is the code I'm 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 there is no point in the buttons that appear next to the progress bar for each file that will be there when the mode is auto, so the download has already begun!

Here is a screenshot:

enter image description here

+6
source share
5 answers

According to the documentation 3.4 .ui-fileupload .start , .ui-fileupload .cancel and .ui-fileupload .progress selects the beginning, cancellation and progress of the panel of your files:

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

For PrimeFaces 5, this is probably the solution (using its atm)

 .fileupload-simple > .ui-fileupload-content { display: none; } .fileupload-simple > .ui-fileupload-buttonbar { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

Then use the fileupload-simple class in your fileUpload component, and you're good to go :)

+3
source

Well, I like it when I can answer my question:

Here is the updated code:

 <p:dialog appendToBody="true" id="importDevices" widgetVar="importDevicesDialogWidget" header="Import Devices" resizable="false" modal="true" onShow="centerDialog('#importDevicesDialog');"> <h:form id="importDevicesForm" enctype="multipart/form-data"> <h:panelGrid columns="1" cellpadding="5"> <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()"/> <p:spacer height="10px;"/> <p:commandButton value="Cancel" action="javascript.void(0);" onclick="clearInvalidFileMsg();importDevicesDialogWidget.hide();"/> </h:panelGrid> </h:form> </p:dialog>

And here is an updated function that hides the progress panel and buttons, and also eliminates errors:

 function clearInvalidFileMsg(){ if ($("#importDevicesForm").is(':visible')){ importDevicesWidget.uploadContent.find("tr.ui-state-error").remove(); importDevicesWidget.uploadContent.find("td.progress").remove(); importDevicesWidget.uploadContent.find("td.start").remove(); importDevicesWidget.uploadContent.find("td.cancel").remove(); } }
+1
source

work for me. Primefaces 6.0.1

  <style type="text/css"> .ui-fileupload-content .ui-progressbar { width: 0px; height: 0px; margin: 0 } </style>
0
source

Using showButtons = "false" in the fileUpload tag.

For instance:

  <p:fileUpload id="fileUpload" mode="advanced" dragDropSupport="false" update="@form" sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(xlsx|xls)$/" multiple="false" label="Select File" showButtons="false"/>
0
source

More articles:


All Articles