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: '...' });
}

It cannot run on the server

The component needs window, File and a real DOM, none of which exist during server rendering. Importing it at module scope makes the build fail or the page crash on first render, which is why the import is dynamic with ssr: false.

App Router or Pages Router

In the App Router the file needs 'use client' at the top as well — a dynamic import does not by itself make a Server Component a Client one. In the Pages Router next/dynamic with ssr: false is sufficient. Either way, give it a loading placeholder so the layout does not shift when the uploader appears.