p-fileUpload does not work more than once primeng

Question

I`ll try to explain what it is going on with this component, 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 this "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 3 buttons of the component choose, upload and cancel) and letting me choose the file from the popup window and the process continues calling the uploadFile method; the thing is, once it finishes, if I try to upload again the same file it does not allow me to do it. It only allows me to choose the file, but the upload button is never enabled and, of course, the uploadFile method is never called. But if I choose another file different from the previous, it works as expected, that means calling the uploadFile method.

I am using

this.fileUpload.clear();

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

Any suggestion?

Answer 1

I think so this issue might have been resolved, but for future reference of developers, please find the solution below.

Please refer for solution and explanation: [ https://github.com/primefaces/primeng/issues/4018][1]

Please pass the template variable to component and then use that variable to clear.

For example:

HTML file:

<p-fileUpload #fileUpload accept=".csv,.txt" maxFileSize="1000000" customUpload="true" (uploadHandler)="uploadFile($event,fileUpload)">

COMPONENT file:

uploadFile(event,fileUpload) {

    for (let file of event.files) {
        this.uploadedFiles.push(file);
    }

    this.uploadFileService.doSomething(this.uploadedFiles[0]).subscribe(x => {
        this.fileInfo = x;
        ..do some stuff..

    });

    fileUpload.clear(); // this will clear your file
}

Answer 2

This works.

Html :( Make a Reference ie, #fileUpload )

<p-fileUpload #fileUpload mode="basic" name="upload[]" maxFileSize="1000000" (onSelect)="onFileChange($event)" chooseLabel="Upload" auto="auto"></p-fileUpload>

TS: (Manipulate Using the Reference):

 @ViewChild('fileUpload') fileUpload: any;

Invoke clear method when needed to clear the fileUpload and do the following:

clear(){
      this.fileUpload.clear();
    }

and onFileChange($event) will work as usual like the below:

 onFileChange(event) {
        for(let file of event.files) {
            this.customUploadedFiles.push(file);
      }
  } 

Answer 3

I see problem in using 'this.fileUpload.clear()'. Replace 'this.fileUpload.clear()' with below code.

this.fileUpload.files.forEach((value, index) => {
 this.fileUpload.files.splice(index, 1);
});