React Integration

// React Component: FileUploader.jsx
import React, { useEffect, useRef } from 'react';
import MultipleUpload from 'multipleupload';

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

 useEffect(() => {
 uploaderRef.current = new MultipleUpload(containerRef.current, {
 uploadUrl: uploadUrl,
 onTaskComplete: (task) => {
 if (onComplete) onComplete(task);
 }
 });

 return () => {
 // Cleanup on unmount
 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>
 );
}

export default FileUploader;

// Usage in your App
import FileUploader from './FileUploader';

function App() {
 return (
 <FileUploader
 uploadUrl="/api/upload"
 onComplete={(task) => console.log('Uploaded:', task.name)}
 />
 );
}