connect to uploader

src/components/UploadBoxDraggble.tsx

@@ -16,22 +16,26 @@ type Props = {
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
 
-    const [files, setFiles] = useState<File[]>([])
-    const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
-    const [isFill, setIsFill] = useState<boolean>(false)
-    const [cover, setCover] = useState<string>(props.coverUrl ? props.coverUrl : '')
+    const [files, setFiles] = useState<File[]>([]);
+    const [perviews, setPerviews] = useState<string[]>(props.preview ?? []);
+    const [cover, setCover] = useState<string>(props.coverUrl ?? "");
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
+        // وقتی parent با preview و onChangePreview مدیریت می‌کند، فقط onChange بزن تا فقط یک ردیف (perviews) نمایش داده شود
+        if (props.preview !== undefined && props.onChangePreview) {
+            props.onChange(acceptedFiles);
+            return;
+        }
         if (props.isMultiple) {
-            const array = [...files, ...acceptedFiles]
-            setFiles(array)
-            props.onChange(array)
+            const array = [...files, ...acceptedFiles];
+            setFiles(array);
+            props.onChange(array);
         } else {
-            setFiles([acceptedFiles[0]])
-            props.onChange([acceptedFiles[0]])
+            setFiles([acceptedFiles[0]]);
+            props.onChange([acceptedFiles[0]]);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [files])
+    }, [files]);
     const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
     const handleDelete = (index: number) => {
@@ -51,15 +55,10 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
     }
 
     useEffect(() => {
-
-        if (props.preview && props.preview.length > 0 && !isFill) {
-            setPerviews(props.preview)
-            console.log('preview', props.preview);
-
-            setIsFill(true)
+        if (props.preview) {
+            setPerviews(props.preview);
         }
-
-    }, [props.preview, isFill])
+    }, [props.preview]);
 
     useEffect(() => {
         setCover(props.coverUrl ? props.coverUrl : '')