import React, { useState } from 'react'; import { Button } from "./ui/button"; import { Input } from "./ui/input"; const Upload = ({ token, validate }) => { console.log('token********', token); const [file, setFile] = useState(null); const [uploading, setUploading] = useState(false); const [uploadProgress, setUploadProgress] = useState(0); const handleFileChange = (event) => { const file = event.target.files?.[0]; if (file) { setFile(file); } }; const handleUpload = async () => { if (!file) { return; } setUploading(true); setUploadProgress(0); try { const xhr = new XMLHttpRequest(); const formData = new FormData(); formData.append('file', file); xhr.upload.onprogress = (event) => { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; setUploadProgress(Math.round(percentComplete)); } }; xhr.onload = async () => { if (xhr.status === 200) { const response = JSON.parse(xhr.responseText); console.log('File uploaded successfully:', response); } else { console.error('Error uploading file:', xhr.statusText); } setUploading(false); }; xhr.onerror = () => { console.error('Error uploading file'); setUploading(false); }; xhr.open('POST', '/upload'); xhr.setRequestHeader('Authorization', `Bearer ${token}`); xhr.setRequestHeader('Accept', 'application/json'); xhr.send(formData); validate(); } catch (error) { console.error('Error uploading file:', error); setUploading(false); } }; return (