Primeng: Hiding upload button in the FileUpload Component and uploading with another button

[anmotayo]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Kindly add the following:

1. Hide upload button property (true/false value) to the file upload component
2. Ability to get the files that has been chosen as a array.

This functionality is needed when there is a form with a FileUpload component and a separate submit button which will be used to upload the files instead of the upload button in the FileUpload component.

See https://devblog.dymel.pl/2016/09/02/upload-file-image-angular2-aspnetcore/ for a sample functionality

[skorunka]

Is there any way how to achieve this now?

[aszechlicki]

Ad. 1. as a workaround you can use css to hide buttons, something like:

.ui-fileupload-buttonbar button:not(.ui-fileupload-choose) {  
    display: none;  
  }  
}

Ad. 2. FileUpload has a files property that returns an array of FileItem
FileUpload also has an upload method that starts upload.
You can then use the onBeforeUpload and onBeforeSend events to customize the request (e.g. add rest of your form data or authorization headers)

[cagataycivici]

I was going to suggest the solution above.

[ningacoding]

how we can call "choose" event/method? to hide p-fileUpload component and click another component like a image then call something like #fileUpload -> (click)="fileUpload.choose()"

[Matmo10]

@cagataycivici I have the same question as @ikuriel - Is there any way to manually invoke the file chooser dialogue? I'm just creating a hidden input and invoking onFileSelected manually at this point.

[huskerona]

One way to do this is to add reference to p-fileUpload component and use @ViewChild to access it. In a method where you want to invoke file chooser you would need something like this (this is when basic file input is used):

@ViewChild('fileUpload') fileUploadComponent: FileUpload;

onShowUpload(showUpload: boolean) {
        // this.showUpload = showUpload;
        const input: HTMLInputElement = this.fileUploadComponent.basicFileInput.nativeElement;
        input.click();
    }

This should do the trick.