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 [files, setFiles] = useState<File[]>([]);
-    const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
+    const [perviews, setPerviews] = useState<string[]>(props.preview ?? []);
-    const [isFill, setIsFill] = useState<boolean>(false)
+    const [cover, setCover] = useState<string>(props.coverUrl ?? "");
-    const [cover, setCover] = useState<string>(props.coverUrl ? 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]
+            const array = [...files, ...acceptedFiles];
-            setFiles(array)
+            setFiles(array);
-            props.onChange(array)
+            props.onChange(array);
         } else {
-            setFiles([acceptedFiles[0]])
+            setFiles([acceptedFiles[0]]);
-            props.onChange([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) {
-        if (props.preview && props.preview.length > 0 && !isFill) {
+            setPerviews(props.preview);
-            setPerviews(props.preview)
-            console.log('preview', props.preview);
-
-            setIsFill(true)
         }
-
+    }, [props.preview]);
-    }, [props.preview, isFill])
 
     useEffect(() => {
         setCover(props.coverUrl ? props.coverUrl : '')

src/pages/editor/components/sidebar/ToolInstructions.tsx

@@ -1,4 +1,5 @@
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
 import {
     ImageUpload,
     VideoInput,
@@ -18,13 +19,15 @@ type ToolInstructionsProps = {
 
 const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
     const { addObject, setSelectedObjectId, setTool } = useEditorStore();
+    const { mutateAsync: uploadFile } = useSingleUpload();
 
-    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
-        if (file) {
+        if (!file) return;
-            const reader = new FileReader();
+        try {
-            reader.onload = (event) => {
+            const result = await uploadFile(file);
-                const imageUrl = event.target?.result as string;
+            const imageUrl = result?.data?.url;
+            if (!imageUrl) return;
             const img = new Image();
             img.onload = () => {
                 const newImage = {
@@ -41,8 +44,8 @@ const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
                 setTool("select");
             };
             img.src = imageUrl;
-            };
+        } catch {
-            reader.readAsDataURL(file);
+            // TODO: show error toast
         }
     };
 

src/pages/editor/components/sidebar/instructions/VideoInput.tsx

@@ -1,19 +1,23 @@
 import { type FC, useCallback, useMemo } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
 import { CloseCircle } from "iconsax-react";
 import { useDropzone } from "react-dropzone";
 import VideoUploadZone from "@/components/VideoUploadZone";
 
 const VideoInput: FC = () => {
-    const { objects, addObject, setSelectedObjectId, setTool, deleteObject } = useEditorStore();
+    const { objects, addObject, setSelectedObjectId, setTool, deleteObject } =
+        useEditorStore();
+    const { mutateAsync: uploadFile } = useSingleUpload();
 
-    const onDrop = useCallback((acceptedFiles: File[]) => {
+    const onDrop = useCallback(
-        acceptedFiles.forEach((file) => {
+        async (acceptedFiles: File[]) => {
-            const videoUrl = URL.createObjectURL(file);
+            for (const file of acceptedFiles) {
+                try {
+                    const result = await uploadFile(file);
+                    const videoUrl = result?.data?.url;
+                    if (!videoUrl) continue;
                     const videoId = `video-${Date.now()}-${Math.random()}`;
-
-
-
                     const newVideo = {
                         id: videoId,
                         type: "video" as ToolType,
@@ -23,12 +27,16 @@ const VideoInput: FC = () => {
                         height: 300,
                         videoUrl,
                     };
-
                     addObject(newVideo);
                     setSelectedObjectId(newVideo.id);
                     setTool("select");
-        });
+                } catch {
-    }, [addObject, setSelectedObjectId, setTool]);
+                    // TODO: show error toast
+                }
+            }
+        },
+        [addObject, setSelectedObjectId, setTool, uploadFile]
+    );
 
     const { getRootProps, getInputProps } = useDropzone({
         onDrop,
@@ -43,10 +51,6 @@ const VideoInput: FC = () => {
     }, [objects]);
 
     const handleDeleteVideo = (videoId: string) => {
-        const videoObject = videoObjects.find((v) => v.id === videoId);
-        if (videoObject?.videoUrl) {
-            URL.revokeObjectURL(videoObject.videoUrl);
-        }
         deleteObject(videoId);
     };