fix: upload app image cover to jpeg for format png

kenneth-bro · Sep 5, 2024 · 2b44b35 · 2b44b35
1 parent 863f305
commit 2b44b35
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/web/app/components/base/app-icon-picker/Uploader.tsx b/web/app/components/base/app-icon-picker/Uploader.tsx
@@ -12,7 +12,7 @@ import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
 
 type UploaderProps = {
   className?: string
-  onImageCropped?: (tempUrl: string, croppedAreaPixels: Area, fileName: string) => void
+  onImageCropped?: (tempUrl: string, type: string, croppedAreaPixels: Area, fileName: string) => void
 }
 
 const Uploader: FC<UploaderProps> = ({
@@ -33,7 +33,7 @@ const Uploader: FC<UploaderProps> = ({
   const onCropComplete = async (_: Area, croppedAreaPixels: Area) => {
     if (!inputImage)
       return
-    onImageCropped?.(inputImage.url, croppedAreaPixels, inputImage.file.name)
+    onImageCropped?.(inputImage.url, inputImage.file.type, croppedAreaPixels, inputImage.file.name)
   }
 
   const handleLocalFileInput = (e: ChangeEvent<HTMLInputElement>) => {

diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
@@ -69,9 +69,9 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     },
   })
 
-  const [imageCropInfo, setImageCropInfo] = useState<{ tempUrl: string; croppedAreaPixels: Area; fileName: string }>()
-  const handleImageCropped = async (tempUrl: string, croppedAreaPixels: Area, fileName: string) => {
-    setImageCropInfo({ tempUrl, croppedAreaPixels, fileName })
+  const [imageCropInfo, setImageCropInfo] = useState<{ tempUrl: string; type: string; croppedAreaPixels: Area; fileName: string }>()
+  const handleImageCropped = async (tempUrl: string, type: string, croppedAreaPixels: Area, fileName: string) => {
+    setImageCropInfo({ tempUrl, type, croppedAreaPixels, fileName })
   }
 
   const handleSelect = async () => {
@@ -88,7 +88,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
       if (!imageCropInfo)
         return
       setUploading(true)
-      const blob = await getCroppedImg(imageCropInfo.tempUrl, imageCropInfo.croppedAreaPixels)
+      const blob = await getCroppedImg(imageCropInfo.tempUrl, imageCropInfo.type, imageCropInfo.croppedAreaPixels)
       const file = new File([blob], imageCropInfo.fileName, { type: blob.type })
       handleLocalFileUpload(file)
     }

diff --git a/web/app/components/base/app-icon-picker/utils.ts b/web/app/components/base/app-icon-picker/utils.ts
@@ -30,6 +30,7 @@ export function rotateSize(width: number, height: number, rotation: number) {
  */
 export default async function getCroppedImg(
   imageSrc: string,
+  imageType: string,
   pixelCrop: { x: number; y: number; width: number; height: number },
   rotation = 0,
   flip = { horizontal: false, vertical: false },
@@ -93,6 +94,6 @@ export default async function getCroppedImg(
         resolve(file)
       else
         reject(new Error('Could not create a blob'))
-    }, 'image/jpeg')
+    }, imageType)
   })
 }