[p-fileUpload] [feature-request] Add simple button UI to FileUpload

[gatapia]

I need a button to upload files. The current FileUpload UI is very cumbersome even in [auto] mode. I have hacked a solution but it should ideally be part of the library. I would live to be able to do [buttonui]="true" and just have the uploader display as a pButton.

I appreciate that this removed drag and drop and other nice features, but most end users still expect to see a simple input type="file" style button.

This is my current hack:

Usage:

<button-file-upload 
            label="Upload Full Contents" 
            icon="ui-icon-cloud-upload"
            [url]="'srv/upload-content/' + appid" 
            accept="text/html" 
            (onUploading)="uploading()"
            (onUploaded)="uploaded()"></button-file-upload>

button-file-upload.html:

<button pButton [label]="label" [icon]="icon" [disabled]="disabled" (click)="triggerUpload()"></button>
<p-fileUpload name="newcontent" [url]="url" [accept]="accept" 
  [ngStyle]="{'position': 'absolute', 'top': '-1000px'}"
  [auto]="true" (onUpload)="onUploaded.next($event)" (onBeforeSend)="data.setAuthHeaderOnXhr($event.xhr)"></p-fileUpload>

buttom-file-upload.ts

import {Component, Input, Output, ElementRef} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {BaseDataService} from '../services/base-data';

@Component({
  selector: 'button-file-upload',
  templateUrl: './button-file-upload.html',
  styleUrls: ['./button-file-upload.scss']
}) 
export class ButtonFileUploadComponent {
  @Input() public label: string = "Upload";
  @Input() public icon: string = "ui-icon-cloud-upload";
  @Input() public url: string = "srv/upload";
  @Input() public accept: string = "*/*";    
  @Input() public disabled: boolean = false;      
  
  @Output() public onUploading = new Subject<any>();  
  @Output() public onUploaded = new Subject<any>();  

  constructor(
    public data: BaseDataService,
    private el: ElementRef) {}

  public triggerUpload() {
    this.onUploading.next(null);
    document.getElementsByClassName('ui-fileupload-choose')[0]['click']();
  }
}

[cagataycivici]

Like the basic uploader of PrimeFaces version?

https://www.primefaces.org/showcase/ui/file/upload/basic.xhtml

[cagataycivici]

Duplicate of #923