1function FileUploader() {
2  const [files, setFiles] = useState([]);
3  const [uploadProgress, setUploadProgress] = useState({});
4
5  const handleDrop = async (acceptedFiles) => {
6    setFiles(prev => [...prev, ...acceptedFiles]);
7    
8    acceptedFiles.forEach(file => {
9      const formData = new FormData();
10      formData.append('file', file);
11      
12      const xhr = new XMLHttpRequest();
13      xhr.open('POST', '/api/upload');
14      
15      xhr.upload.onprogress = (event) => {
16        if (event.lengthComputable) {
17          const progress = (event.loaded / event.total) * 100;
18          setUploadProgress(prev => ({
19            ...prev,
20            [file.name]: progress
21          }));
22        }
23      };
24      
25      xhr.onload = () => {
26        if (xhr.status === 200) {
27          console.log(`${file.name} uploaded successfully`);
28        }
29      };
30      
31      xhr.send(formData);
32    });
33  };
34
35  return (
36    <div 
37      onDrop={handleDrop}
38      onDragOver={(e) => e.preventDefault()}
39    >
40      {files.map(file => (
41        <div key={file.name}>
42          {file.name}: {uploadProgress[file.name]}%
43        </div>
44      ))}
45    </div>
46  );
47}