Hide upload button PrimeNG

user_2215065 0
Viewed 8127

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

For now, I have this enter image description here

But I would like to have only "Choose" and "Cancel" buttons. enter image description here

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

primeng angular upload
6 Answers

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;
}
user_27884780

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

  }
user_40053790

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

user_137688180
Related