Alpine.js Integration

// Alpine.js component with MultipleUpload
function fileUploader() {
 return {
 uploader: null,
 fileCount: 0,
 progress: 0,
 status: 'Ready',
 isUploading: false,
 completedFiles: [],

 init() {
 this.uploader = new MultipleUpload(this.$el, {
 uploadUrl: '/api/upload',
 autoUpload: false,
 onQueueAdd: (task) => { this.fileCount++; },
 onQueueRemove: (task) => { this.fileCount = Math.max(0, this.fileCount - 1); },
 onUploadStart: () => { this.isUploading = true; this.status = 'Uploading...'; },
 onTaskProgress: (task, pct) => { this.progress = pct; },
 onTaskComplete: (task) => { this.completedFiles.push(task.name); },
 onUploadComplete: () => { this.status = 'Done!'; this.isUploading = false; }
 });
 },
 selectFiles() { this.uploader.openFileDialog(); },
 startUpload() { this.uploader.startUpload(); }
 };
}