feat: support png, gif, webp (#7947)

Co-authored-by: xuanson9699 <84961581+xuanson9699@users.noreply.github.com>
This commit is contained in:
Nam Vu
2024-11-06 08:05:05 +07:00
committed by GitHub
parent fb656d480e
commit ac0fed6402
3 changed files with 93 additions and 12 deletions

View File

@@ -74,6 +74,11 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
setImageCropInfo({ tempUrl, croppedAreaPixels, fileName })
}
const [uploadImageInfo, setUploadImageInfo] = useState<{ file?: File }>()
const handleUpload = async (file?: File) => {
setUploadImageInfo({ file })
}
const handleSelect = async () => {
if (activeTab === 'emoji') {
if (emoji) {
@@ -85,9 +90,13 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
}
}
else {
if (!imageCropInfo)
if (!imageCropInfo && !uploadImageInfo)
return
setUploading(true)
if (imageCropInfo.file) {
handleLocalFileUpload(imageCropInfo.file)
return
}
const blob = await getCroppedImg(imageCropInfo.tempUrl, imageCropInfo.croppedAreaPixels, imageCropInfo.fileName)
const file = new File([blob], imageCropInfo.fileName, { type: blob.type })
handleLocalFileUpload(file)
@@ -121,7 +130,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
<Divider className='m-0' />
<EmojiPickerInner className={activeTab === 'emoji' ? 'block' : 'hidden'} onSelect={handleSelectEmoji} />
<Uploader className={activeTab === 'image' ? 'block' : 'hidden'} onImageCropped={handleImageCropped} />
<Uploader className={activeTab === 'image' ? 'block' : 'hidden'} onImageCropped={handleImageCropped} onUpload={handleUpload}/>
<Divider className='m-0' />
<div className='w-full flex items-center justify-center p-3 gap-2'>