bs-file-upload is a drop zone over a native file input: drop files on it, click it or use the browse button. Each batch is added to the two-way [(files)] list, reported through (filesDropped) and announced to screen readers. Rows show the name, size and a progress bar you update; an *bsFileUploadFileTemplate="let upload" template replaces a row. With name the input submits its files with a form, no JavaScript needed.
<bs-file-upload [(files)]="files" (filesDropped)="upload($event)"></bs-file-upload>
<bs-file-upload [(files)]="files" (filesDropped)="upload($event)">
<ng-container *bsFileUploadFileTemplate="let upload">
<span>{{ upload.file.name }}</span>
<button type="button" (click)="remove(upload)">Remove</button>
</ng-container>
</bs-file-upload>
import { Component, signal } from '@angular/core';
import {
BsFileUploadComponent,
BsFileUploadFileTemplateDirective,
FileUpload,
} from '@mintplayer/ng-bootstrap/file-upload';
@Component({
selector: 'my-file-upload-demo',
templateUrl: './my-file-upload-demo.component.html',
imports: [BsFileUploadComponent, BsFileUploadFileTemplateDirective],
})
export class MyFileUploadDemoComponent {
protected files = signal<FileUpload[]>([]);
upload(added: FileUpload[]) {
// Send the files; write progress back immutably:
// this.files.update(list => list.map(f => f.index === i ? { ...f, progress } : f));
}
remove(upload: FileUpload) {
this.files.update(list => list.filter(f => f !== upload));
}
}