Angular Integration

// file-uploader.component.ts
import { Component, AfterViewInit, OnDestroy, ViewChild,
 ElementRef, Input, Output, EventEmitter } from '@angular/core';
import MultipleUpload from 'multipleupload';

@Component({
 selector: 'app-file-uploader',
 template: `
 <div #uploaderEl class="mu-uploader">
 <button type="button" class="mu-select-btn">Select Files</button>
 <input type="file" class="mu-file-input" multiple style="display:none" />
 <div class="mu-dropzone">
 <div class="mu-dropzone-text">Drag &amp; drop files here</div>
 </div>
 <div class="mu-queue"></div>
 </div>
 `
})
export class FileUploaderComponent implements AfterViewInit, OnDestroy {
 @ViewChild('uploaderEl') uploaderEl!: ElementRef;
 @Input() uploadUrl: string = '/api/upload';
 @Output() fileUploaded = new EventEmitter<any>();

 private uploader: any;

 ngAfterViewInit() {
 this.uploader = new MultipleUpload(this.uploaderEl.nativeElement, {
 uploadUrl: this.uploadUrl,
 onTaskComplete: (task: any) => {
 this.fileUploaded.emit(task);
 }
 });
 }

 ngOnDestroy() {
 if (this.uploader && this.uploader.destroy) {
 this.uploader.destroy();
 }
 }
}

// Usage in a parent template
<app-file-uploader
 uploadUrl="/api/upload"
 (fileUploaded)="onFileUploaded($event)"
></app-file-uploader>