Spaces:
Paused
Paused
File size: 1,398 Bytes
848efd4 5576f5e 64b2395 5576f5e 64b2395 5576f5e 64b2395 5576f5e 64b2395 5576f5e 64b2395 5576f5e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import React from "react";
import "./FileUploadCard.css";
export default function FileUploadCard({
files = [],
onFilesChange,
uploadProgress = {},
uploading,
onUpload,
}) {
const handleSelect = (e) => {
onFilesChange(Array.from(e.target.files));
};
return (
<div className="upload-card">
<h3>Upload Files</h3>
<p className="sub">Images, PDFs, Docs, etc.</p>
<div className="dropzone">
<input type="file" multiple onChange={handleSelect} />
<span>Drop files here or browse</span>
</div>
{files.map((file, i) => {
const percent = uploadProgress[file.name] || 0;
return (
<div key={i} className="file-box">
<div className="file-row">
<strong>{file.name}</strong>
<span className="percent">{percent}%</span>
</div>
<p>{(file.size / 1024 / 1024).toFixed(2)} MB</p>
<div className="progress-bar">
<div
className="progress"
style={{ width: `${percent}%` }}
/>
</div>
</div>
);
})}
{files.length > 0 && (
<button
className="clear-btn"
onClick={onUpload}
disabled={uploading}
>
{uploading ? "Uploading..." : "Upload Files"}
</button>
)}
</div>
);
}
|