How to Remove Upload Cancel Button from <P:Fileupload>

Remove File Upload and Cancel Button from Primefaces p:fileUpload

PrimeFaces 6.x or newer

Use at least these attributes:

<p:fileUpload ... auto="true" skinSimple="true" />

PrimeFaces 4.x / 5.x

You can only use CSS for this as they removed the showButtons attribute:

.ui-fileupload-buttonbar .ui-fileupload-upload {
    display: none;
}
.ui-fileupload-buttonbar .ui-fileupload-cancel {
    display: none;
}

Beware of CSS ordering rules, see also How do I override default PrimeFaces CSS with custom styles?

PrimeFaces 3.x or older

Use at least these attributes:

<p:fileUpload ... auto="true" showButtons="false" />

How do I remove the Upload and Cancel buttons from the PrimeNG p-fileupload component?

According to documentation you should add below properties:

mode="basic" 
[auto]="true"

how to remove upload cancel button from p:fileUpload

Basically all you have to do is to assign find out the right css selectors and set them with display:none; (put them in your .css file and include it with <h:outputStylesheet)

in general (in css you need to escape the colon with \3a Handling a colon in an element ID in a CSS selector , while in jquery you should use \\:)

#some_prefix_id\3a your_file_upload_component_id .someClass{
    display:none;
}

where the some_prefix_id might be some form id or some naming
container id ,

or (sometimes there is no prefix before your_file_upload_component_id )

#your_file_upload_component_id .someClass{
    display:none;
}

Although , INMO , best approach would be assigning an id to your form and using this selector in css :

#your_form_id .someClass{
    display:none;
}

Now to the exact selectors...

so to remove the upload button

#related_image .start{
    display:none;
}

or if you want to do the same with jquery

$("#related_image .start").hide();

to remove the cancel button which shows up adjacent to the selected image(once the image is selected)

#related_image .cancel{
    display:none;
}

or if you want to do the same with jquery

$("#related_image .cancel").hide();

to remove progress bar

#related_image .progress{
    display:none;
}

or if you want to do the same with jquery

$("#related_image .progress").hide();

You can test the jquery approach on primefaces showcase if you want , just replace the #related_image with #j_idt19\\:j_idt20 for example $("#j_idt19\\:j_idt20 .start").hide();

---

There is no such attribute as fileLimit take a look at the Tag fileUpload

Hide upload button PrimeNG

The only solution working for me was to hide it with css :

.ui-fileupload-buttonbar button:nth-child(2){
  display:none;
}

Remove only Cancel button from pFileUpload

Just replace showCancelButton="false" with [showCancelButton]="false".

Edit

showCancelButton is not available in 2.0.6 and you should upgrade to at least 4.1.0

If you cannot upgrade, then try this :

::ng-deep .ui-fileupload-buttonbar button:nth-child(3) {
  display:none;
}

Primefaces 6: disable button Upload with fileUpload component with mode simple

Unfortunately it's not possible, I tried and discovered that fileUpload is a "non-ClientBehaviorHolder parent" (aka. no p:ajax ).

The second option would be use one of the java script events of the generated input type="file" ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file ), but prime faces do not expose then...

Wich means the jsf - prime faces way, at least in simple mode, is to let the button always enable and validate file selection on form submit.

Although if you really want/need enable the button on file selection, you can use jquery to attach a event listener to the input type="file" that will enable the button, but this option is kinda of hack, so I don't recomend it because prime-faces and jsf tend to be unforgiving when you mess around with their expected component behaviors.

How to disable Choose button in PrimeFaces FileUpload until the upload is complete

You can use onstart and oncomplete to achieve this:

<p:fileUpload onstart="disableChoosing()" 
              oncomplete="enableChoosing()"
              widgetVar="uploadWV"/>

---

<script>
   function disableChoosing() {
     PF('uploadWV').disableButton(PF('uploadWV').chooseButton);
     PF('uploadWV').chooseButton.find('input[type="file"]').attr('disabled', 'disabled');
   }

   function enableChoosing() {
    if(!PF('uploadWV').files.length) {
        PF('uploadWV').enableButton(PF('uploadWV').chooseButton);
        PF('uploadWV').chooseButton.find('input[type="file"]').removeAttr('disabled');
    }
   }
</script>

Disable Choose button fileUpload in primefaces

I resolved putting a disabled atribut in fileUpload liked with a boolean variable in my bean.
When the file finish to upload, the variable change his values to true and I update the fileUpload componnt, then the component get disabled.
Thank you guys to the help.

---

Related Topics