Hide upload button PrimeNG

Question

I'm using file upload from PrimeNG : https://www.primefaces.org/primeng/#/fileupload

For now, I have this

But I would like to have only "Choose" and "Cancel" buttons.

So on primeNG website, they say to use showUploadButton="false"

But it's not working.

Refering to this post : Remove File Upload and Cancel Button from Primefaces p:fileUpload

I tried :

<p-fileUpload ...  showButtons="false" showCancelButton="true"/>

then I tried

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

Nothing works. Maybe it's because it was refering to another version. I'm using version of primeNG 2.0.6 and angular 2.4.0

Chau Tran · Answer 1 · 2017-08-16T02:43:59.420

22

You have to put the showUploadButton inside of a bracket for it to work.

<p-fileUpload [showUploadButton]="false"></p-fileUpload>

Result

EDIT: You need to get the latest version of PrimeNG to work with Angular 4. Since Angular launched their Angular 4, PrimeNG has also launched PrimeNG v4 to work with Angular 4

edited Aug 16 '17 at 02:43

answered Aug 15 '17 at 19:12

Chau Tran

4,668
1
21
39

score 2 · Answer 2 · answered Aug 14 '17 at 10:23

2

have you tried to do like this:

<p:fileUpload ...  [showButtons]="false" [showCancelButton]="true"/>

Hope it helps you

answered Aug 14 '17 at 10:23

federico scamuzzi

3,708
1
17
24

Nop, i'm getting Can't bind to 'showButtons' since it isn't a known property of 'p-fileUpload'. – anais1477 Aug 14 '17 at 11:38
Mmm si it look your notnusing it proprlerly.. so double check how you import module ... or if it is really p:fileUpload – federico scamuzzi Aug 14 '17 at 11:40
Aw right i'm using p-fileUpload. If I change it to p:fileUpload it says "namespace p is not bound". On their website it's p-fileUpload. What should I do ? – anais1477 Aug 14 '17 at 11:57
It look like you have not imported or installare it correctly.. try to cancel your npm modules reinstall it and look how to import correctly – federico scamuzzi Aug 14 '17 at 11:58
I did it, it doesnt work. Morever, on their website it's written with p-fileUpload. Looks like on the version I'm using there is not all variables available. – anais1477 Aug 14 '17 at 12:23
How can I get old documentation of primeng ? I didn't find it – anais1477 Aug 14 '17 at 12:44

score 1 · Answer 3 · answered Jul 26 '21 at 13:37

1

To hide BUTTONBAR:

::ng-deep .p-fileupload .p-fileupload-buttonbar {
    display:none;
}

To hide CONTENT files:

::ng-deep .p-fileupload .p-fileupload-content {
    display:none;
}

answered Jul 26 '21 at 13:37

Andre Mesquita

879
12
25

score 0 · Accepted Answer · answered Aug 25 '17 at 08:27

0

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

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

answered Aug 25 '17 at 08:27

anais1477

466
1
17
36

it's not working with latest version of primeNg. https://www.primefaces.org/primeng/v11-lts/#/fileupload – pathe.kiran Dec 01 '21 at 12:32

score 0 · Answer 5 · answered Jul 24 '19 at 07:17

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'});
    });

  }

score -2 · Answer 6 · answered Jul 17 '20 at 09:44

-2

[showUploadButton]="false" [showCancelButton]="false"

answered Jul 17 '20 at 09:44

harsh sakhiya

1

This answer seem to propose a similar solution to thing that were already said. Also, without any comment about what this does, it is not really helpful. – Guillaume Gris Jul 17 '20 at 10:09

Hide upload button PrimeNG

6 Answers6