uploader template

src/components/UploadBoxDraggble.tsx

@@ -3,6 +3,7 @@ import { FC, useCallback, useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { clx } from '../helpers/utils';
+import { useSingleUpload } from '@/pages/setting/personality/hooks/usePersonalityData';
 
 type Props = {
     label: string;
@@ -13,7 +14,10 @@ type Props = {
     onChangePreview?: (preview: string[]) => void,
     getCover?: (url: string) => void,
     coverUrl?: string,
-    isReset?: boolean
+    isReset?: boolean,
+    useUploadService?: boolean,
+    onUploadComplete?: (urls: string[]) => void,
+    onUploadError?: (error: Error) => void
 }
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
@@ -23,18 +27,63 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
     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 [isUploading, setIsUploading] = useState<boolean>(false)
 
-    const onDrop = useCallback((acceptedFiles: File[]) => {
-        if (props.isMultiple) {
-            const array = [...files]
-            array.push(acceptedFiles[0])
-            setFiles(array)
-            props.onChange(array)
+    const { mutateAsync: singleUpload } = useSingleUpload()
+
+    const onDrop = useCallback(async (acceptedFiles: File[]) => {
+        if (props.useUploadService) {
+            setIsUploading(true)
+            try {
+                const uploadPromises = acceptedFiles.map(file => singleUpload(file))
+                const results = await Promise.all(uploadPromises)
+                const urls = results.map(result => result?.data?.url).filter(Boolean)
+
+                if (props.onUploadComplete) {
+                    props.onUploadComplete(urls)
+                }
+
+                if (props.isMultiple) {
+                    const array = [...files]
+                    array.push(acceptedFiles[0])
+                    setFiles(array)
+                    props.onChange(array)
+                } else {
+                    setFiles([acceptedFiles[0]])
+                    props.onChange([acceptedFiles[0]])
+                }
+            } catch (error) {
+                console.error('Upload failed:', error)
+                if (props.onUploadError) {
+                    props.onUploadError(error as Error)
+                }
+                // Fallback to normal file handling
+                if (props.isMultiple) {
+                    const array = [...files]
+                    array.push(acceptedFiles[0])
+                    setFiles(array)
+                    props.onChange(array)
+                } else {
+                    setFiles([acceptedFiles[0]])
+                    props.onChange([acceptedFiles[0]])
+                }
+            } finally {
+                setIsUploading(false)
+            }
         } else {
-            setFiles([acceptedFiles[0]])
-            props.onChange([acceptedFiles[0]])
+            // Original behavior
+            if (props.isMultiple) {
+                const array = [...files]
+                array.push(acceptedFiles[0])
+                setFiles(array)
+                props.onChange(array)
+            } else {
+                setFiles([acceptedFiles[0]])
+                props.onChange([acceptedFiles[0]])
+            }
         }
-    }, [files])
+    }, [files, props.useUploadService, props.onUploadComplete, props.onUploadError, singleUpload])
+
     const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
     const handleDelete = (index: number) => {
@@ -84,7 +133,7 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
                     color='#8C90A3'
                 />
                 <div className='text-description text-xs'>
-                    {props.label}
+                    {isUploading ? 'در حال آپلود...' : props.label}
                 </div>
 
                 <div className='flex items-center gap-2'>