I have an PrimeNG Angular app that uses a p-fileUpload with its [multiple] tag set to true.
I want to keep a running list of the pending files in the list - both after files are added, and also whenever a file is removed from the list.
When files are added, this is no problem.
I just do this in the html...
<p-fileUpload #fileUpload
(onSelect)=onFilesSelectedToUpload($event.currentFiles)"
[multiple]="true">
...and then in the typescript file I just do this:
onFilesSelectedToUpload(files: any[]) {
files.forEach(file => {
//Free to do whatever I want with each added file
}
}
What I would like to do, though, is the same thing on the (onRemove) event - only I can only get ahold of the file to remove.
Would like to do something like this:
<p-fileUpload #fileUpload
(onSelect)=onFilesSelectedToUpload($event.currentFiles)"
(onRemove)=onFileRemoved($event.currentFiles)"
[multiple]="true">
onFileRemoved(files: any[]) {
files.forEach(file => {
//Free to do whatever I want with the remaining files
//I don't even care about the file that's been removed!
}
}
But of course I can't because (onRemoved) is only concerned with the file that is being removed, and only lets me do something like this:
<p-fileUpload #fileUpload
(onSelect)=onFilesSelectedToUpload($event.currentFiles)"
(onRemove)=onFileRemoved($event.file)"
[multiple]="true">
onFileRemoved(file: any) {
//How can I get a list of the remaining files?
}
Any suggestions?
Thank you!
You can take a ViewChild of the FileUpload primeng component, then access the property _files to get the latest files selected. Then we can use filter array method to remove the file that was removed from the list.
export class FileUploadAdvancedDemo {
@ViewChild(FileUpload) fileUpload: FileUpload;
...
...
onRemove(event: FileRemoveEvent) {
const files = this.fileUpload._files.filter(
(file: File) => file !== event.file
);
console.log(files);
// filesCtrl.patchValue();
this.onFilesSelectedToUpload(files);
}
...
<div class="card flex justify-content-center">
<p-toast />
<p-fileUpload
name="demo[]"
url="https://www.primefaces.org/cdn/api/upload.php"
(onUpload)="onUpload($event)"
(onSelect)="onSelect($event)"
(onRemove)="onRemove($event)"
[multiple]="true"
accept="image/*"
maxFileSize="1000000"
>
<ng-template pTemplate="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">
{{ file.name }} - {{ file.size }} bytes
</li>
</ul>
</ng-template>
</p-fileUpload>
</div>
import { Component, inject, ViewChild } from '@angular/core';
import { ImportsModule } from './imports';
import { MessageService } from 'primeng/api';
import {
ReactiveFormsModule,
FormBuilder,
FormControl,
FormGroup,
Validators,
UntypedFormControl,
} from '@angular/forms';
import {
FileRemoveEvent,
FileSelectEvent,
FileUpload,
} from 'primeng/fileupload';
interface UploadEvent {
originalEvent: Event;
files: File[];
}
@Component({
selector: 'file-upload-advanced-demo',
templateUrl: './file-upload-advanced-demo.html',
standalone: true,
imports: [ImportsModule],
providers: [MessageService],
})
export class FileUploadAdvancedDemo {
@ViewChild(FileUpload) fileUpload: FileUpload;
uploadedFiles: any[] = [];
constructor(private messageService: MessageService) {}
onUpload(event: UploadEvent) {
for (let file of event.files) {
this.uploadedFiles.push(file);
}
this.messageService.add({
severity: 'info',
summary: 'File Uploaded',
detail: '',
});
}
onFilesSelectedToUpload(files: any[]) {
console.log(files);
files.forEach((file) => {});
}
onSelect(event: FileSelectEvent) {
this.onFilesSelectedToUpload(event.currentFiles);
}
onRemove(event: FileRemoveEvent) {
const files = this.fileUpload._files.filter(
(file: File) => file !== event.file
);
console.log(files);
// filesCtrl.patchValue();
this.onFilesSelectedToUpload(files);
}
}