FileUpload does not allow selecting same file

[veplechuc]

I'm submitting a ...

[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

I have defined the component this way
<p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event)">

on my package Json I have defined

"primeng": "^4.1.0-rc.3"

and have this method on the js file

uploadFile(event) { for (let file of event.files) { this.uploadedFiles.push(file); } this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => { this.fileInfo = x; ..do some stuff.. }); }

It works as expected the first time (showing the 3 buttons of the component choose, upload and cancel) and letting me to choose the file from the popup window, the thing is, one it finish the process, if I try to upload the same file again It does not allows me to do it. It only allows me to choose the file, but the upload button is never enabled (unless I choose a different file, in that case the upload button is enabled) and of course the uploadfile method is never called. And after that if I choose the same file as the begining it works as expected.

I am using

this.fileUpload.clear();

just for clear the part where the uploaded file it is showed to the user

Thanks

Expected behavior
I think I should allows me to upload the same file.

Minimal reproduction of the problem with instructions
The example showed on http://primefaces.org/primeng/#/fileupload has the same behavior

Please tell us about your environment:
Windows 10, Visual Studio Code

• Angular version: 4.0

• PrimeNG version: 4.1.0-rc3

• Browser: [Chrome XX]

• Language: [ ES6/7 | ES5]

[kheckelmann]

I had problems with this issue today too. The problem seems to be, that the input of type file is never cleared, so after uploading the file the input still contains it and because of that onFileSelect is not called when selecting it again. Maybe it would be enough to just clear that input in the clear method?

It seems to work in the 'basic' mode because there the input contains a ngIf so that it is only there if no files are selected. Because of that the input is always "fresh" when the dialog is opened and the onFileSelect gets called correctly. There is no such thing in the advanced mode.

I really would appreciate a quick fix.

[dremlin]

I have got the same issue in Angular 4.3 and PrimeNG 4.1.0.

1. The component does not react on "multiple" input parameter. If I set up multiple="multiple" or [multiple]="true" the component does not allow me to choose multiple files when I click on "Choose" button. However, I can drag and drop a file and it will be displayed in the attached file list below.

After n investigation I found out that the following CSS class hides the input Html element

.ui-fileupload-choose.ui-fileupload-choose-selected input[type=file] { display: none; }
As a temporary solution I just override the CSS class as

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

2. If I choose a file and add it to the list and remove the file (so the list is empty), I cannot choose the same file again. It looks like the file's metadata saved somewhere. However, public files: File[] array is empty.