File size: 2,271 Bytes
2f7ab94 921ed36 2f7ab94 |
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 |
'use client';
import { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import { cn } from '@/lib/utils';
import { ImageSlider } from './ImageSlider';
import { toast } from 'sonner';
type FileDropzoneProps = {
onDropFile: (fileBase64: string) => void; // Update to pass base64 image
processedImageUrl?: string; // Parent provides processed image URL
}
export function FileDropzone({ onDropFile, processedImageUrl }: FileDropzoneProps) {
const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null); // Store the original image
// Handle file upload
const onDrop = useCallback((acceptedFiles: File[]) => {
acceptedFiles.forEach((file) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const base64String = reader.result as string;
setOriginalImageUrl(base64String); // Set the original image URL
onDropFile(base64String); // Send the base64 image to the parent component
};
reader.onerror = (error) => {
toast.error(`Error converting file to base64: ${error}`);
};
});
}, [onDropFile]);
// Configure dropzone
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: {
'image/*': ['.jpeg', '.jpg', '.png'],
},
});
return (
<div
{...getRootProps()}
className={cn(
'focus:outline-none border-2 border-dashed flex justify-center items-center cursor-pointer transition-all duration-200',
isDragActive ? 'bg-gray-200 border-gray-500' : 'bg-white border-gray-400',
'h-[600px] w-[800px]'
)}
>
<input {...getInputProps()} />
{originalImageUrl ? (
<ImageSlider
originalImageUrl={originalImageUrl}
processedImageUrl={processedImageUrl || originalImageUrl}
/>
) : (
<p className="text-gray-600 text-center">Drag and drop an image here or click to select a file</p>
)}
</div>
);
}
|