Function FileUpload

site/src/components/FileUpload/FileUpload.tsx:19–100

({
	isUploading,
	onUpload,
	onRemove,
	file,
	removeLabel,
	title,
	description,
	extensions,
})

}

export const FileUpload: FC<FileUploadProps> = ({
	isUploading,
	onUpload,
	onRemove,
	file,
	removeLabel,
	title,
	description,
	extensions,
}) => {
	const fileDrop = useFileDrop(onUpload, extensions);
	const inputRef = useRef<HTMLInputElement>(null);
	const clickable = useClickable<HTMLDivElement>(() =>
		inputRef.current?.click(),
	);

	if (!isUploading && file) {
		return (
			<div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-surface-primary p-4">
				<div className="flex flex-row items-center gap-4">
					<FolderIcon className="size-icon-sm" />
					<span>{file.name}</span>
				</div>

				<Button
					variant="subtle"
					size="icon-lg"
					onClick={onRemove}
					title={removeLabel}
				>
					<TrashIcon className="size-icon-sm" />
				</Button>
			</div>
		);
	}

	return (
		<>
			<div
				data-testid="drop-zone"
				className={cn(
					"flex cursor-pointer items-center justify-center rounded-lg border-2",
					"border-dashed border-border p-12 hover:bg-surface-primary",
					isUploading && "pointer-events-none opacity-75",
				)}
				{...clickable}
				{...fileDrop}
			>
				<div className="flex flex-col items-center gap-2">
					<div className="flex size-16 items-center justify-center">
						{isUploading ? (
							<CircularProgress size={32} />
						) : (
							<CloudUploadIcon className="size-16" />
						)}
					</div>

					<div className="flex flex-col items-center gap-1">