File size: 3,017 Bytes
30cc31a | 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | "use client";
import { useRef } from "react";
/** File types accepted by the scientist file upload. */
const ACCEPTED_EXTENSIONS = ".fasta,.fa,.pdb,.cif";
function formatSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
interface FileUploadProps {
file: File | null;
onFileChange: (file: File | null) => void;
disabled?: boolean;
}
/**
* Paperclip-style file upload button for scientist-provided PDB/FASTA input.
* Shows a small chip with filename + size when a file is selected.
*/
export default function FileUpload({ file, onFileChange, disabled }: FileUploadProps) {
const inputRef = useRef<HTMLInputElement>(null);
const handleClick = () => {
if (disabled) return;
inputRef.current?.click();
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const selected = e.target.files?.[0] ?? null;
onFileChange(selected);
// Reset so the same file can be re-selected
if (inputRef.current) inputRef.current.value = "";
};
return (
<div className="flex items-center gap-1.5">
<input
ref={inputRef}
type="file"
accept={ACCEPTED_EXTENSIONS}
className="hidden"
onChange={handleChange}
/>
{/* Paperclip button */}
<button
onClick={handleClick}
disabled={disabled}
title="Upload PDB/FASTA file (.fasta, .fa, .pdb, .cif)"
className={`p-2.5 rounded-xl transition-colors ${
file
? "text-accent bg-accent/10"
: "text-muted-fg hover:text-foreground hover:bg-muted"
} disabled:opacity-30`}
>
<svg
className="w-4 h-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
</svg>
</button>
{/* File chip */}
{file && (
<span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-accent/10 text-accent text-[11px] font-medium max-w-[200px]">
<span className="truncate">{file.name}</span>
<span className="text-accent/60 shrink-0">({formatSize(file.size)})</span>
<button
onClick={(e) => {
e.stopPropagation();
onFileChange(null);
}}
className="ml-0.5 hover:text-red-500 transition-colors shrink-0"
title="Remove file"
>
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</span>
)}
</div>
);
}
|