Next.js Integration

// components/FileUploader.jsx (Client Component)
'use client';
import { useEffect, useRef } from 'react';

export default function FileUploader({ uploadUrl, onComplete }) {
 const containerRef = useRef(null);
 const uploaderRef = useRef(null);

 useEffect(() => {
 // Dynamic import to avoid SSR �?MultipleUpload needs the DOM
 import('multipleupload').then((mod) => {
 const MultipleUpload = mod.default;
 uploaderRef.current = new MultipleUpload(containerRef.current, {
 uploadUrl: uploadUrl,
 onTaskComplete: (task) => {
 if (onComplete) onComplete(task);
 }
 });
 });

 return () => {
 if (uploaderRef.current && uploaderRef.current.destroy) {
 uploaderRef.current.destroy();
 }
 };
 }, [uploadUrl]);

 return (
 <div ref={containerRef} className="mu-uploader">
 <button type="button" className="mu-select-btn">Select Files</button>
 <input type="file" className="mu-file-input" multiple style={{ display: 'none' }} />
 <div className="mu-dropzone">
 <div className="mu-dropzone-text">Drag &amp; drop files here</div>
 </div>
 <div className="mu-queue"></div>
 </div>
 );
}

// app/page.jsx (or pages/index.jsx)
import FileUploader from '../components/FileUploader';

export default function Home() {
 return (
 <main>
 <h1>File Upload</h1>
 <FileUploader
 uploadUrl="/api/upload"
 onComplete={(task) => console.log('Done:', task.name)}
 />
 </main>
 );
}

// app/api/upload/route.js (API route)
export async function POST(request) {
 const formData = await request.formData();
 const file = formData.get('file');
 // Process file...
 return Response.json({ success: true, fileId: '...' });
}