Remove File Upload and Cancel Button from Primefaces p:fileUpload

Question

I would like to remove upload and cancel button from p:fileUpload. For Upload button I tried css like this (in different variations):

.ui-fileupload-upload button {
        display: none;
}

but it continues to be visible.

<button type="button"
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled ui-fileupload-upload"
    disabled="disabled">
    <span
        class="ui-button-icon-left ui-icon ui-c ui-icon-arrowreturnthick-1-n"></span>
    <span class="ui-button-text ui-c">Upload</span>
</button>

I saw this publication [a link] (how to remove upload cancel button from <p:fileUpload>) and tried again different css but i did not manage to get rid of it. Thanks.

You forgot to tell the PrimeFaces version used. – BalusC Aug 21 '14 at 05:58 — BalusC, Aug 21 '14 at 05:58

BalusC · Accepted Answer · 2019-07-24T09:33:45.717

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" />

score 2 · Answer 2 · answered Mar 25 '16 at 06:16

2

Try this:

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

answered Mar 25 '16 at 06:16

Wendel Lopes

21
2

Why is this better than the accepted and upvoted answer – Kukeltje Mar 25 '16 at 07:05
The question asked was not about all the Buttons, but only on 'Upload' and 'Cancel' buttons. "I would like to remove upload and cancel button from p:fileUpload. ...." – Wendel Lopes Apr 21 '16 at 01:26
BalusC's answer asks to set showbuttons false. But there is no such attribute in case of primefaces 6. Your solutions worked fine. – Tahir Hussain Mir Jun 18 '19 at 07:46

score -2 · Answer 3 · answered Jul 24 '19 at 07:20

In angular, using FileUploader from ng2-file-upload, in .html :

<tr *ngFor="let item of uploader.queue let i = index">
    <td>
      <div *ngIf= "!uploader.queue[i].isUploaded">
       <button type="button" class="btn btn-success btn-xs" style="margin:2px" (click)="onSubmit(i,item,$event.target)" >
        <span class="glyphicon glyphicon-upload"></span> Upload
       </button>
      </div>
    </td>
 </tr>

In the component.ts

    public index:number ;
    public onFileSelected() {
      this.uploader.queue[this.index].isUploaded=false; // initializing uploaded to false
    }

    public onSubmit(index:number){
      this.uploadService.uploadFile(this.csvJsonData).subscribe((responseData)=>{
      this.onSubmitresponse = responseData ;
      if(this.onSubmitresponse.status==201){
        this.uploader.queue[index].progress = 100;
        this.toastrService.success('The File has been uploaded successfully !',this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});

        this.uploader.queue[index].isUploaded=true;// will hide the upload button
      }
     else this.toastrService.error(this.onSubmitresponse.errorMessage,this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});
    });

  }

This question is about PrimeFaces, not PrimeNG – Kukeltje Jul 24 '19 at 07:48 — Kukeltje, Jul 24 '19 at 07:48

Remove File Upload and Cancel Button from Primefaces p:fileUpload

3 Answers3

PrimeFaces 6.x or newer

PrimeFaces 4.x / 5.x

PrimeFaces 3.x or older

Linked