uploader template
This commit is contained in:
hamid zarghami
@@ -5,12 +5,17 @@ import ColorPicker from '@/components/ColorPicker';
|
||||
import { usePersonalityStore } from '../store/Store';
|
||||
import { SectionItemType, BackgroundSize, SectionName } from '../types/Types';
|
||||
import Select from '@/components/Select';
|
||||
import { useSingleUpload } from '../hooks/usePersonalityData';
|
||||
import { toast } from '@/components/Toast';
|
||||
|
||||
const SettingSideBar: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
const { activeSection, setColumnsCount, updateActiveItem, data, activeItemIndex } = usePersonalityStore()
|
||||
const [color, setColor] = useState("#aabbcc");
|
||||
const [backgroundSize, setBackgroundSize] = useState<BackgroundSize>(BackgroundSize.COVER)
|
||||
const [isUploading, setIsUploading] = useState<boolean>(false)
|
||||
|
||||
const { mutateAsync: singleUpload } = useSingleUpload()
|
||||
|
||||
// تشخیص background size بر اساس style موجود
|
||||
const getCurrentBackgroundSizeType = (style?: SectionItemType['style']) => {
|
||||
@@ -49,20 +54,47 @@ const SettingSideBar: FC = () => {
|
||||
updateActiveItem({ backgroundColor: color })
|
||||
}
|
||||
|
||||
const handleUploadBackground = (file: File[]) => {
|
||||
const handleUploadBackground = async (file: File[]) => {
|
||||
if (activeSection && file.length > 0) {
|
||||
const imageUrl = URL.createObjectURL(file[0])
|
||||
setIsUploading(true)
|
||||
|
||||
const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex]
|
||||
updateActiveItem({
|
||||
backgroundImage: imageUrl,
|
||||
style: {
|
||||
...currentItem?.style,
|
||||
backgroundSize: getBackgroundSize(backgroundSize),
|
||||
backgroundRepeat: getBackgroundRepeat(backgroundSize),
|
||||
backgroundPosition: 'center center'
|
||||
try {
|
||||
const uploadResult = await singleUpload(file[0])
|
||||
const imageUrl = uploadResult?.data?.url
|
||||
|
||||
if (imageUrl) {
|
||||
const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex]
|
||||
updateActiveItem({
|
||||
backgroundImage: imageUrl,
|
||||
style: {
|
||||
...currentItem?.style,
|
||||
backgroundSize: getBackgroundSize(backgroundSize),
|
||||
backgroundRepeat: getBackgroundRepeat(backgroundSize),
|
||||
backgroundPosition: 'center center'
|
||||
}
|
||||
})
|
||||
toast('تصویر پسزمینه با موفقیت آپلود شد', 'success')
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error uploading background image:', error)
|
||||
toast('خطا در آپلود تصویر پسزمینه، از فایل محلی استفاده شد', 'error')
|
||||
|
||||
// Fallback to object URL if upload fails
|
||||
const imageUrl = URL.createObjectURL(file[0])
|
||||
|
||||
const currentItem = data[activeSection as keyof typeof data]?.items[activeItemIndex]
|
||||
updateActiveItem({
|
||||
backgroundImage: imageUrl,
|
||||
style: {
|
||||
...currentItem?.style,
|
||||
backgroundSize: getBackgroundSize(backgroundSize),
|
||||
backgroundRepeat: getBackgroundRepeat(backgroundSize),
|
||||
backgroundPosition: 'center center'
|
||||
}
|
||||
})
|
||||
} finally {
|
||||
setIsUploading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,35 +142,35 @@ const SettingSideBar: FC = () => {
|
||||
|
||||
<div className='flex h-[51px] gap-5 mt-6'>
|
||||
<div
|
||||
className='w-[102px] h-full bg-[#EAECF4] cursor-pointer hover:bg-[#d1d5db] transition-colors'
|
||||
onClick={() => handleColumnClick(1)}
|
||||
className={`w-[102px] h-full bg-[#EAECF4] transition-colors ${isUploading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-[#d1d5db]'}`}
|
||||
onClick={() => !isUploading && handleColumnClick(1)}
|
||||
></div>
|
||||
<div
|
||||
className='w-[102px] h-full flex gap-1 cursor-pointer group'
|
||||
onClick={() => handleColumnClick(2)}
|
||||
className={`w-[102px] h-full flex gap-1 group transition-colors ${isUploading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
onClick={() => !isUploading && handleColumnClick(2)}
|
||||
>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex h-[51px] gap-5 mt-5'>
|
||||
<div
|
||||
className='w-[102px] h-full flex gap-1 cursor-pointer group'
|
||||
onClick={() => handleColumnClick(3)}
|
||||
className={`w-[102px] h-full flex gap-1 group transition-colors ${isUploading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
onClick={() => !isUploading && handleColumnClick(3)}
|
||||
>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
</div>
|
||||
<div
|
||||
className='w-[102px] h-full flex gap-1 cursor-pointer group'
|
||||
onClick={() => handleColumnClick(4)}
|
||||
className={`w-[102px] h-full flex gap-1 group transition-colors ${isUploading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
onClick={() => !isUploading && handleColumnClick(4)}
|
||||
>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className='flex-1 bg-[#EAECF4] group-hover:bg-[#d1d5db] transition-colors'></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
<div className={`flex-1 bg-[#EAECF4] transition-colors ${!isUploading && 'group-hover:bg-[#d1d5db]'}`}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +184,7 @@ const SettingSideBar: FC = () => {
|
||||
|
||||
<div className='mt-5'>
|
||||
<UploadBoxDraggble
|
||||
label={t('setting.upload_background')}
|
||||
label={isUploading ? 'در حال آپلود...' : t('setting.upload_background')}
|
||||
onChange={handleUploadBackground}
|
||||
/>
|
||||
</div>
|
||||
@@ -177,6 +209,7 @@ const SettingSideBar: FC = () => {
|
||||
})
|
||||
}}
|
||||
placeholder={t('setting.size')}
|
||||
disabled={isUploading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user