connect to uploader

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,31 +19,33 @@ 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) {
-            const reader = new FileReader();
-            reader.onload = (event) => {
-                const imageUrl = event.target?.result as string;
-                const img = new Image();
-                img.onload = () => {
-                    const newImage = {
-                        id: `image-${Date.now()}`,
-                        type: "image" as ToolType,
-                        x: 100,
-                        y: 100,
-                        width: img.width,
-                        height: img.height,
-                        imageUrl,
-                    };
-                    addObject(newImage);
-                    setSelectedObjectId(newImage.id);
-                    setTool("select");
+        if (!file) return;
+        try {
+            const result = await uploadFile(file);
+            const imageUrl = result?.data?.url;
+            if (!imageUrl) return;
+            const img = new Image();
+            img.onload = () => {
+                const newImage = {
+                    id: `image-${Date.now()}`,
+                    type: "image" as ToolType,
+                    x: 100,
+                    y: 100,
+                    width: img.width,
+                    height: img.height,
+                    imageUrl,
                 };
-                img.src = imageUrl;
+                addObject(newImage);
+                setSelectedObjectId(newImage.id);
+                setTool("select");
             };
-            reader.readAsDataURL(file);
+            img.src = imageUrl;
+        } catch {
+            // TODO: show error toast
         }
     };
 

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

@@ -1,34 +1,42 @@
 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[]) => {
-        acceptedFiles.forEach((file) => {
-            const videoUrl = URL.createObjectURL(file);
-            const videoId = `video-${Date.now()}-${Math.random()}`;
-
-
-
-            const newVideo = {
-                id: videoId,
-                type: "video" as ToolType,
-                x: 100,
-                y: 100,
-                width: 400,
-                height: 300,
-                videoUrl,
-            };
-
-            addObject(newVideo);
-            setSelectedObjectId(newVideo.id);
-            setTool("select");
-        });
-    }, [addObject, setSelectedObjectId, setTool]);
+    const onDrop = useCallback(
+        async (acceptedFiles: 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,
+                        x: 100,
+                        y: 100,
+                        width: 400,
+                        height: 300,
+                        videoUrl,
+                    };
+                    addObject(newVideo);
+                    setSelectedObjectId(newVideo.id);
+                    setTool("select");
+                } catch {
+                    // 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);
     };