minor upload update

1 files changed, 49 insertions, 19 deletions

diff --git a/src/components/upload/Dropzone.tsx b/src/components/upload/Dropzone.tsx
index 6980f5c..5c882be 100644
--- a/src/components/upload/Dropzone.tsx
+++ b/src/components/upload/Dropzone.tsx
@@ -3,40 +3,70 @@
 import Dropzone from 'react-dropzone';
 import UploadIcon from '@icons/upload.svg';
 import { Button } from '@/components/ui';
-import { useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export function FileDropzone() {
-    // const [files, setFiles] = useState<File[]>([]);
-    const hiddenInputRef = useRef<HTMLInputElement | null>(null);
+    const [file, setFile] = useState<File | null>(null);
+    const [preview, setPreview] = useState<string | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (preview) URL.revokeObjectURL(preview);
+        };
+    }, [preview]);
+
     return (
         <Dropzone
-            multiple
-            onDrop={(acceptedFiles: File[]) => {
-                // setFiles((prev) => [...prev, ...acceptedFiles]);
+            multiple={false}
+            accept={{ 'image/*': [] }}
+            onDrop={(acceptedFiles) => {
+                const f = acceptedFiles[0];
+                if (!f) return;
+
+                const url = URL.createObjectURL(f);
+
+                setFile(f);
+                setPreview(url);
             }}
         >
             {({ getRootProps, getInputProps }) => (
                 <div
                     {...getRootProps({
                         className:
-                            'w-full h-[460px] justify-between p-7.5 border flex flex-col text-sm items-center rounded-[10px]',
+                            'w-[900px] h-[508px] flex flex-col gap-[20px]',
                     })}
                 >
-                    <input name="files" type="file" ref={hiddenInputRef} />
                     <input {...getInputProps()} />
 
-                    <div className="flex flex-col justify-center items-center h-full w-full gap-2.5">
-                        <UploadIcon />
-                        <span>
-                            Выбери файлы на компьютере или перетащи сюда. JPG,
-                            PNG до 20MB.
-                        </span>
-                        <span>
-                            {hiddenInputRef.current?.files?.length ?? 0}
-                        </span>
+                    <div
+                        className={`
+        w-full
+        flex-1
+        relative
+        overflow-hidden
+        rounded-[10px]
+        border border-violet
+        ${preview ? 'bg-violet/30' : 'bg-background'}
+    `}
+                    >
+                        {!preview ? (
+                            <div className="w-full h-full flex flex-col justify-center items-center gap-[60px] p-[30px]">
+                                <UploadIcon />
+                                <span className="text-center">
+                                    Выбери файлы на компьютере или перетащи
+                                    сюда. JPG, PNG до 20MB.
+                                </span>
+                            </div>
+                        ) : (
+                            <img
+                                src={preview}
+                                alt="preview"
+                                className="w-full h-full object-contain"
+                            />
+                        )}
                     </div>
-                    <Button size={'lg'} className="justify-self-end">
-                        Выбрать
+                    <Button size="lg">
+                        {preview ? 'Заменить' : 'Выбрать'}
                     </Button>
                 </div>
             )}