Primeng: Fileupload click on choose button icon doesn't trigger file select

[blackholegalaxy]

I'm submitting a ...

[x] bug report

Stackblitz Case (Bug Reports)
https://stackblitz.com/edit/prime-fileupload-bug-select-event?file=app%2Fapp.component.html

Current behavior

On file upload, clicking on plus icon on choose button doesn't actually trigger the file selector. It just do nothing. Clicking on the label works.

Sorry on my demo font-awesiome icons doesn't render correctly. But behavior still can be reproduced. Just click on square if icon is not rendered.

Expected behavior
Clicking anywhere on the button, icon included, should trigger the file selector to appear.

Minimal reproduction of the problem with instructions
Just use fileupload module.

• Angular version: 5.2
• PrimeNG version: 5.2.5
• Browser: chrome and all other tested

[lingarajsureban]

+1
Same issue here...

[thizzo]

+1
same

[yigitfindikli]

You need to add the primeicons configuration. You can look here https://www.primefaces.org/primeng/#/setup.

[GottaCodeNow]

Why was this closed? It is still a problem, even on the PrimeNG demo website page for the Upload File control:
https://www.primefaces.org/primeng/#/fileupload

Try clicking on the "+" symbol font icon on the first "Choose" button on the page directly under the "Advanced" heading (the ones under "Basic" and "Basic Auto" work, but not the one under "Advanced").

The file dialog box does not open as it should.

[vignesh221]

@GottaCodeNow Yes I agree with you. Why was this closed? The issue still exists in Prime ng. You can verify very well by visiting their website itself. https://www.primefaces.org/primeng/#/fileupload.

Also this issue is only observed in File upload with mode set as 'Advanced' and not in 'Basic' mode.

@yigitfindikli Can you reopen the issue?

[J2BB]

It would be great to unclosed this issue and to resolve it !
The problem is quite urgent, this type of browse button is often use with advanced mode (compared to basic button).

Can a PrimeNg staff member tell us more about the date of the next release including this fix ?

Thanks ;)

---

For developers who are waiting for a fix, I found two ways allowing to work around the problem :

Way 1 (CSS side) :
:host /deep/ .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose input[type=file] { padding: 0; z-index: 999; }

OR

Way 2 (Angular side) :
@ViewChild(FileUpload) fileUpload; ngAfterViewInit() { this.adaptBrowseButtonHack(); } private adaptBrowseButtonHack() { // Moving "input[type=file]" tag from the beginning of "ui-fileupload-choose" tag to the end of the same tag allow to fix the bug const browseButtonElem = $(this.fileUpload.el.nativeElement).find('.ui-fileupload-choose'); browseButtonElem.find('input[type=file]').detach().appendTo(browseButtonElem); }

Do not hesitate to make a return if you notice a problem with one of these hacks.

[guardiannite]

I took @J2BB recommendation of applying CSS, and noticed my cursor wasn't a 'pointer' when I hovered over the _choose_ button.

So I also added this css:

::-webkit-file-upload-button {
  cursor: pointer;
}

https://stackoverflow.com/questions/7554845/the-cursorpointer-property-doesnt-apply-to-file-upload-buttons-in-webkit-brows

[J2BB]

Oh great !! It works perfectly ! Thank you @guardiannite ;)