Primeng: File Upload Choose Button Not Working

[guavajellyaaron]

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

[ x] bug report => Search github for a similar issue or PR before submitting
[ ] 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

Current behavior
Clicking the "choose" button does nothing.

Expected behavior
Clicking the "choose" button should open up the file explorer

• Angular version: 2.0.X

@angular/cli: 1.2.0
node: 8.1.0
os: win32 x64
@angular/animations: 4.2.5
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cdk: 2.0.0-beta.8
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.5
@angular/material: 2.0.0-beta.8

• PrimeNG version: 4.1.1

• Browser: [all | Chrome 59.0.3071.115

[kamran-pervaiz]

I am not sure about Choose buttong but when i upload even a 0KB text file I get error

File Size exceeded Limit

are you experiencing the same? I am using "4.1.0-rc.3".

[ready1]

I am also having the same issue, the choose button does not work for v4.1.0 and v4.1.1.
I have reverted back to v4.0.0 and it seems to be working fine.

[guavajellyaaron]

Yes, I have tried both 4.1.0-rc.3 and 4.1.0-rc.2.

@ready1 is correct. it is working in v4.0.0

[loic49]

Same problem as #3435

[ghost]

Working fine for me in PrimeNG 4.1.1 version

"dependencies": { "@angular/animations": "^4.3.1", "@angular/common": "^4.3.1", "@angular/compiler": "^4.3.1", "@angular/core": "^4.3.1", "@angular/forms": "^4.3.1", "@angular/http": "^4.3.1", "@angular/platform-browser": "^4.3.1", "@angular/platform-browser-dynamic": "^4.3.1", "@angular/platform-server": "^4.3.1", "@angular/router": "^4.3.1", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "primeng": "^4.1.1", "rxjs": "^5.4.2", "zone.js": "^0.8.14" },

[SethiaKynes]

Are you using newest primeng.min.css? Styles for .ui-fileupload-choose changed (previously display was set to none).
Fixed problem for me.

[myzhan24]

I'm not using primeng stylesheets and I had to add a class definition for the input element overlapping the choose button because it was using display: none by default.

.ui-fileupload-buttonbar .ui-fileupload-choose input { display: block; }

Once I added that, the input has an area and the choose button works.

[daniele-pecora]

Once you add a file the choose button wont let you add another one.
So the css fix form @myzhan24 had to be extended for the state selected.

So that's what fixed it on primeng version 4.1.3

.ui-fileupload-choose.ui-fileupload-choose-selected input[type=file],
.ui-fileupload-buttonbar .ui-fileupload-choose input { 
     display: block; 
}

[cagataycivici]

I can't replicate with 4.1.3, does live demo work? Provide a plunkr please.

http://plnkr.co/edit/Qi2Nw2imLpDUF8NJinYw?p=preview

[daniele-pecora]

Plunkr for

Once you add a file the choose button wont let you add another one.

http://plnkr.co/edit/wp7chQOsqW2OhKvjbNQq?p=preview

[LeoTrujillo]

I have the same problem, however in the official website of primeng the button is working

[cmlee1220]

Thanks @daniele-pecora for the suggestion. The choose button would not work after a file was already selected.
On v.4.2.0-rc.1, I had to modify primeng.min.css and change the display from none to block.

.ui-fileupload-choose.ui-fileupload-choose-selected input[type=file]{display:block}