danak/dmail-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uploader template

Browse Source
This commit is contained in:
hamid zarghami
2025-07-16 20:51:15 +03:30
parent 2043daae39
commit 6f640a80a7
12 changed files with 490 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/UploadBox.tsx
+75 -15
View File
@@ -2,6 +2,7 @@ import { FC, useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useDropzone } from 'react-dropzone'
import { CloseCircle } from 'iconsax-react'
import { useSingleUpload } from '@/pages/setting/personality/hooks/usePersonalityData'
type Props = {
@@ -9,34 +10,93 @@ type Props = {
isMultiple?: boolean,
onChange?: (file: File[]) => void;
isReset?: boolean;
useUploadService?: boolean,
onUploadComplete?: (urls: string[]) => void,
onUploadError?: (error: Error) => void
}
const UploadBox: FC<Props> = (props: Props) => {
const { t } = useTranslation('global')
const [files, setFiles] = useState<File[]>([])
const [isUploading, setIsUploading] = useState<boolean>(false)
const onDrop = useCallback((acceptedFiles: File[]) => {
if (props.isMultiple) {
const array = [...files]
array.push(acceptedFiles[0])
setFiles(array)
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
props.onChange && 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)
if (props.onChange) {
props.onChange(array)
}
} else {
setFiles([acceptedFiles[0]])
if (props.onChange) {
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)
if (props.onChange) {
props.onChange(array)
}
} else {
setFiles([acceptedFiles[0]])
if (props.onChange) {
props.onChange([acceptedFiles[0]])
}
}
} finally {
setIsUploading(false)
}
} else {
setFiles([acceptedFiles[0]])
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
props.onChange && props.onChange([acceptedFiles[0]])
// Original behavior
if (props.isMultiple) {
const array = [...files]
array.push(acceptedFiles[0])
setFiles(array)
if (props.onChange) {
props.onChange(array)
}
} else {
setFiles([acceptedFiles[0]])
if (props.onChange) {
props.onChange([acceptedFiles[0]])
}
}
}
}, [files])
}, [files, props.useUploadService, props.onUploadComplete, props.onUploadError, singleUpload])
const { getRootProps, getInputProps } = useDropzone({ onDrop })
const handleRemove = (index: number) => {
const array = [...files]
array.splice(index, 1)
setFiles(array)
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
props.onChange && props.onChange(array)
if (props.onChange) {
props.onChange(array)
}
}
useEffect(() => {
@@ -53,10 +113,10 @@ const UploadBox: FC<Props> = (props: Props) => {
<div>
<div className='text-sm'>{props.label}</div>
<div className='w-full h-10 mt-1 border border-border rounded-xl items-center px-2 flex gap-2.5'>
<button {...getRootProps()} className=' w-fit h-7 rounded-lg text-xs px-6 bg-secondary'>
<button {...getRootProps()} className=' w-fit h-7 rounded-lg text-xs px-6 bg-secondary' disabled={isUploading}>
<input {...getInputProps()} />
{t('select_file')}
{isUploading ? 'در حال آپلود...' : t('select_file')}
</button>
<div className='lg:flex gap-2 hidden'>
src/components/UploadBoxDraggble.tsx
+60 -11
View File
@@ -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'>
src/components/UploadButton.tsx
+56 -4
View File
@@ -2,10 +2,15 @@ import { CloseCircle, Paperclip2 } from 'iconsax-react'
import { FC, useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useDropzone } from 'react-dropzone'
import { useSingleUpload } from '@/pages/setting/personality/hooks/usePersonalityData'
type Props = {
title?: string
useUploadService?: boolean,
onUploadComplete?: (urls: string[]) => void,
onUploadError?: (error: Error) => void,
onChange?: (files: File[]) => void
}
const UploadButton: FC<Props> = (props) => {
@@ -14,10 +19,53 @@ const UploadButton: FC<Props> = (props) => {
const { title } = props
const [files, setFiles] = useState<File[]>([])
const [isUploading, setIsUploading] = useState<boolean>(false)
const onDrop = useCallback((acceptedFiles: File[]) => {
setFiles((prev) => [...prev, ...acceptedFiles])
}, [])
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)
}
const newFiles = [...files, ...acceptedFiles]
setFiles(newFiles)
if (props.onChange) {
props.onChange(newFiles)
}
} catch (error) {
console.error('Upload failed:', error)
if (props.onUploadError) {
props.onUploadError(error as Error)
}
// Fallback to normal file handling
const newFiles = [...files, ...acceptedFiles]
setFiles(newFiles)
if (props.onChange) {
props.onChange(newFiles)
}
} finally {
setIsUploading(false)
}
} else {
// Original behavior
const newFiles = [...files, ...acceptedFiles]
setFiles(newFiles)
if (props.onChange) {
props.onChange(newFiles)
}
}
}, [files, props.useUploadService, props.onUploadComplete, props.onUploadError, props.onChange, singleUpload])
const { getRootProps, getInputProps } = useDropzone({ onDrop })
@@ -25,6 +73,10 @@ const UploadButton: FC<Props> = (props) => {
const array = [...files]
array.splice(index, 1)
setFiles(array)
if (props.onChange) {
props.onChange(array)
}
}
@@ -34,7 +86,7 @@ const UploadButton: FC<Props> = (props) => {
<input {...getInputProps()} />
<Paperclip2 size={20} color='#000' />
<div className='text-xs'>{title ? title : t('attachment_select')}</div>
<div className='text-xs'>{isUploading ? 'در حال آپلود...' : (title ? title : t('attachment_select'))}</div>
</div>
{files.map((file, index) => (