Spaces:
Running on Zero
Running on Zero
File size: 3,782 Bytes
b701455 | 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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import { useCallback } from 'react';
import { ImageUp, Upload, X } from 'lucide-react';
import { useDropzone } from 'react-dropzone';
import { Button } from './ui/button';
import { cn } from '../lib/utils';
interface ImageInputProps {
value?: string | null;
onChange: (base64: string | null) => void;
label?: string;
description?: string;
className?: string;
compact?: boolean;
}
function readFileAsDataUrl(file: File) {
return new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
const result = event.target?.result;
if (typeof result === 'string') {
resolve(result);
} else {
reject(new Error('Unable to read image file.'));
}
};
reader.onerror = () => reject(reader.error ?? new Error('Unable to read image file.'));
reader.readAsDataURL(file);
});
}
export function ImageInput({ value, onChange, label, description, className, compact = false }: ImageInputProps) {
const handleDrop = useCallback(
async (acceptedFiles: File[]) => {
const file = acceptedFiles[0];
if (!file) return;
try {
const base64 = await readFileAsDataUrl(file);
onChange(base64);
} catch (error) {
console.error('Failed to read dropped image', error);
}
},
[onChange],
);
const { getRootProps, getInputProps, isDragAccept, isDragReject } = useDropzone({
accept: { 'image/*': [] },
maxFiles: 1,
maxSize: 10 * 1024 * 1024,
multiple: false,
onDrop: (acceptedFiles) => {
void handleDrop(acceptedFiles);
},
});
return (
<div className={cn('space-y-3', className)}>
{label ? (
<div className="space-y-1">
<p className="text-sm font-medium text-ink">{label}</p>
{description ? <p className="text-xs leading-5 text-muted">{description}</p> : null}
</div>
) : null}
{value ? (
<div className="overflow-hidden rounded-[1.5rem] border border-line bg-paper">
<div className={cn('relative overflow-hidden bg-sand/45', compact ? 'h-40' : 'h-52')}>
<img src={value} alt="Selected input" className="h-full w-full object-contain p-4" />
<Button
type="button"
variant="outline"
size="icon"
className="absolute right-3 top-3 h-9 w-9 bg-paper/92"
onClick={() => onChange(null)}
>
<X className="h-4 w-4" />
<span className="sr-only">Remove image</span>
</Button>
</div>
</div>
) : (
<div
{...getRootProps()}
className={cn(
'rounded-[1.5rem] border border-dashed bg-oat/60 px-4 py-6 transition',
compact ? 'min-h-36' : 'min-h-40',
isDragAccept && 'border-clay bg-clay/8',
isDragReject && 'border-clay-strong bg-clay/10',
'cursor-pointer border-line hover:border-clay/45 hover:bg-oat',
)}
>
<input {...getInputProps()} />
<div className="flex h-full flex-col items-center justify-center gap-3 text-center">
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-paper text-clay shadow-[0_12px_30px_-22px_color-mix(in_oklab,var(--color-clay)_50%,transparent)]">
{isDragAccept ? <Upload className="h-5 w-5" /> : <ImageUp className="h-5 w-5" />}
</div>
<div className="space-y-1">
<p className="text-sm font-medium text-ink">Drop an image or click to browse</p>
<p className="text-xs leading-5 text-muted">PNG, JPG, or WEBP up to 10 MB.</p>
</div>
</div>
</div>
)}
</div>
);
}
|