uploader and create service

2025-01-29 11:51:09 +03:30
parent ce0019fde0
commit 9c8b15a2cf
8 changed files with 196 additions and 44 deletions
@@ -1,40 +1,80 @@
-import { DocumentUpload, Gallery } from 'iconsax-react'
-import { FC, useCallback } from 'react'
+import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
+import { FC, useCallback, useState } from 'react'
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';

 type Props = {
    label: string;
-    onChange: (file: File) => void;
+    onChange: (file: File[]) => void;
+    isMultiple?: boolean;
 }

 const UploadBoxDraggble: FC<Props> = (props: Props) => {
+
+    const [files, setFiles] = useState<File[]>([])
    const { t } = useTranslation('global')

    const onDrop = useCallback((acceptedFiles: File[]) => {
-        props.onChange(acceptedFiles[0])
+        if (props.isMultiple) {
+            const array = [...files]
+            array.push(acceptedFiles[0])
+            setFiles(array)
+            props.onChange(array)
+        } else {
+            setFiles([acceptedFiles[0]])
+            props.onChange([acceptedFiles[0]])
+        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
+    }, [files])
    const { getRootProps, getInputProps } = useDropzone({ onDrop })

+    const handleDelete = (index: number) => {
+        const array = [...files]
+        array.splice(index, 1)
+        setFiles(array)
+        props.onChange(array)
+    }
+
    return (
-        <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
-            <input {...getInputProps()} />
-            <Gallery
-                className='size-8'
-                color='#8C90A3'
-            />
-            <div className='text-description text-xs'>
-                {props.label}
+        <div>
+            <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
+                <input {...getInputProps()} />
+                <Gallery
+                    className='size-8'
+                    color='#8C90A3'
+                />
+                <div className='text-description text-xs'>
+                    {props.label}
+                </div>
+
+                <div className='flex items-center gap-2'>
+                    <DocumentUpload
+                        className='size-4'
+                        color='black'
+                    />
+                    <div className='text-xs'>{t('upload')}</div>
+                </div>
            </div>

-            <div className='flex items-center gap-2'>
-                <DocumentUpload
-                    className='size-4'
-                    color='black'
-                />
-                <div className='text-xs'>{t('upload')}</div>
-            </div>
+            {
+                files.length > 0 && (
+                    <div className='mt-4 flex gap-4 items-center'>
+                        {
+                            files.map((file, index) => (
+                                <div key={index} className='flex items-center gap-2'>
+                                    <div key={index} className='flex relative items-center gap-2'>
+                                        <img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
+                                        <div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                            <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                )
+            }
+
        </div>
    )
 }