In removing a temporary file selection from a p-fileUpload, can you grab all the files still...

I have an Angular app that uses a p-fileUpload component that has its [multiple] attribute set to true such that it can upload multiple files at once.

So far this has worked rather well. In particular because I can use the (onSelect) function to pass in all of the files that have been selected to do some error checking.

Problem is I haven't been able to do the same thing and pass in all of the files when a file is removed.

In the ngOnInit() function in my ts file, I add an UntypedFormControl called 'files'

this.form = this._fb.group({
'files': new UntypedFormControl({value: null, disabled: !this.allowFileUpload}, [Validators.required])
});


In my html file, I implement a p-fileUpload component that sets the 'files' form control to the files selected by the user

<p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3" chooseLabel="Choose File(s)..."
(onSelect)="form.get('files').setValue($event.currentFiles);form.markAsDirty(); onFilesSelectedToUpload($event.currentFiles)"
[multiple]="true">


This passes the files to the ts file to do whatever I want with them

onFilesSelectedToUpload(files: any[]) {

files.forEach(file => {

}
}


What I would like to do is do something similar when the user removes one of the files.

The implementation below doesn't work, though, as there is no $event.currentFiles to pass in when onRemove is triggered.

<p-fileUpload #fileUpload styleClass="col-12" chooseStyleClass="col-3" chooseLabel="Choose File(s)..."
(onSelect)="form.get('files').setValue($event.currentFiles);form.markAsDirty(); onFilesSelectedToUpload($event.currentFiles)"
(onRemove)="form.get('files').setValue($event.currentFiles); onRemoveFile($event.currentFiles)"
[multiple]="true">


Any suggestions?

Thanks much.

Continue reading...