Hard
React File Uploader: Fixing Multiple File Upload with Progress Tracking and Cancellation
You're implementing a file upload component that needs to handle multiple files, show progress, and allow cancellation. What's wrong with this implementation?
1function FileUploader({ onUploadComplete }) {2 const [files, setFiles] = useState([]);3 const [uploading, setUploading] = useState(false);4 const [progress, setProgress] = useState({});56 const uploadFile = async (file) => {7 const formData = new FormData();8 formData.append('file', file);910 const response = await fetch('/api/upload', {11 method: 'POST',12 body: formData13 });1415 if (!response.ok) throw new Error('Upload failed');16 return response.json();17 };1819 const handleUpload = async () => {20 setUploading(true);21 try {22 const uploads = files.map(file => {23 return uploadFile(file)24 .then(result => {25 setProgress(prev => ({26 ...prev,27 [file.name]: 10028 }));29 return result;30 })31 .catch(error => {32 setProgress(prev => ({33 ...prev,34 [file.name]: -135 }));36 throw error;37 });38 });3940 const results = await Promise.all(uploads);41 onUploadComplete(results);42 } finally {43 setUploading(false);44 }45 };4647 return (48 <div className="uploader">49 <input50 type="file"51 multiple52 onChange={e => setFiles(Array.from(e.target.files))}53 disabled={uploading}54 />55 <button onClick={handleUpload} disabled={uploading || !files.length}>56 Upload57 </button>58 {files.map(file => (59 <div key={file.name} className="file-item">60 {file.name} - {progress[file.name] || 0}%61 </div>62 ))}63 </div>64 );65}