fix: cannot upload animated webp image as app icon (#11453)

web/app/components/base/app-icon-picker/ImageInput.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import type { ChangeEvent, FC } from 'react'
+import { createRef, useEffect, useState } from 'react'
+import type { Area } from 'react-easy-crop'
+import Cropper from 'react-easy-crop'
+import classNames from 'classnames'
+
+import { ImagePlus } from '../icons/src/vender/line/images'
+import { useDraggableUploader } from './hooks'
+import { checkIsAnimatedImage } from './utils'
+import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
+
+export type OnImageInput = {
+  (isCropped: true, tempUrl: string, croppedAreaPixels: Area, fileName: string): void
+  (isCropped: false, file: File): void
+}
+
+type UploaderProps = {
+  className?: string
+  onImageInput?: OnImageInput
+}
+
+const ImageInput: FC<UploaderProps> = ({
+  className,
+  onImageInput,
+}) => {
+  const [inputImage, setInputImage] = useState<{ file: File; url: string }>()
+  const [isAnimatedImage, setIsAnimatedImage] = useState<boolean>(false)
+  useEffect(() => {
+    return () => {
+      if (inputImage)
+        URL.revokeObjectURL(inputImage.url)
+    }
+  }, [inputImage])
+
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+
+  const onCropComplete = async (_: Area, croppedAreaPixels: Area) => {
+    if (!inputImage)
+      return
+    onImageInput?.(true, inputImage.url, croppedAreaPixels, inputImage.file.name)
+  }
+
+  const handleLocalFileInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      setInputImage({ file, url: URL.createObjectURL(file) })
+      checkIsAnimatedImage(file).then((isAnimatedImage) => {
+        setIsAnimatedImage(!!isAnimatedImage)
+        if (isAnimatedImage)
+          onImageInput?.(false, file)
+      })
+    }
+  }
+
+  const {
+    isDragActive,
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+  } = useDraggableUploader((file: File) => setInputImage({ file, url: URL.createObjectURL(file) }))
+
+  const inputRef = createRef<HTMLInputElement>()
+
+  const handleShowImage = () => {
+    if (isAnimatedImage) {
+      return (
+        <img src={inputImage?.url} alt='' />
+      )
+    }
+
+    return (
+      <Cropper
+        image={inputImage?.url}
+        crop={crop}
+        zoom={zoom}
+        aspect={1}
+        onCropChange={setCrop}
+        onCropComplete={onCropComplete}
+        onZoomChange={setZoom}
+      />
+    )
+  }
+
+  return (
+    <div className={classNames(className, 'w-full px-3 py-1.5')}>
+      <div
+        className={classNames(
+          isDragActive && 'border-primary-600',
+          'relative aspect-square bg-gray-50 border-[1.5px] border-gray-200 border-dashed rounded-lg flex flex-col justify-center items-center text-gray-500')}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {
+          !inputImage
+            ? <>
+              <ImagePlus className="w-[30px] h-[30px] mb-3 pointer-events-none" />
+              <div className="text-sm font-medium mb-[2px]">
+                <span className="pointer-events-none">Drop your image here, or&nbsp;</span>
+                <button className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>browse</button>
+                <input
+                  ref={inputRef} type="file" className="hidden"
+                  onClick={e => ((e.target as HTMLInputElement).value = '')}
+                  accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
+                  onChange={handleLocalFileInput}
+                />
+              </div>
+              <div className="text-xs pointer-events-none">Supports PNG, JPG, JPEG, WEBP and GIF</div>
+            </>
+            : handleShowImage()
+        }
+      </div>
+    </div>
+  )
+}
+
+export default ImageInput

web/app/components/base/app-icon-picker/index.tsx

@@ -8,12 +8,14 @@ import Button from '../button'
 import { ImagePlus } from '../icons/src/vender/line/images'
 import { useLocalFileUploader } from '../image-uploader/hooks'
 import EmojiPickerInner from '../emoji-picker/Inner'
-import Uploader from './Uploader'
+import type { OnImageInput } from './ImageInput'
+import ImageInput from './ImageInput'
 import s from './style.module.css'
 import getCroppedImg from './utils'
 import type { AppIconType, ImageFile } from '@/types/app'
 import cn from '@/utils/classnames'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
+
 export type AppIconEmojiSelection = {
   type: 'emoji'
   icon: string
@@ -69,14 +71,15 @@ 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 })
-  }
+  type InputImageInfo = { file: File } | { tempUrl: string; croppedAreaPixels: Area; fileName: string }
+  const [inputImageInfo, setInputImageInfo] = useState<InputImageInfo>()
 
-  const [uploadImageInfo, setUploadImageInfo] = useState<{ file?: File }>()
-  const handleUpload = async (file?: File) => {
-    setUploadImageInfo({ file })
+  const handleImageInput: OnImageInput = async (isCropped: boolean, fileOrTempUrl: string | File, croppedAreaPixels?: Area, fileName?: string) => {
+    setInputImageInfo(
+      isCropped
+        ? { tempUrl: fileOrTempUrl as string, croppedAreaPixels: croppedAreaPixels!, fileName: fileName! }
+        : { file: fileOrTempUrl as File },
+    )
   }
 
   const handleSelect = async () => {
@@ -90,15 +93,15 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
       }
     }
     else {
-      if (!imageCropInfo && !uploadImageInfo)
+      if (!inputImageInfo)
         return
       setUploading(true)
-      if (imageCropInfo.file) {
-        handleLocalFileUpload(imageCropInfo.file)
+      if ('file' in inputImageInfo) {
+        handleLocalFileUpload(inputImageInfo.file)
         return
       }
-      const blob = await getCroppedImg(imageCropInfo.tempUrl, imageCropInfo.croppedAreaPixels, imageCropInfo.fileName)
-      const file = new File([blob], imageCropInfo.fileName, { type: blob.type })
+      const blob = await getCroppedImg(inputImageInfo.tempUrl, inputImageInfo.croppedAreaPixels, inputImageInfo.fileName)
+      const file = new File([blob], inputImageInfo.fileName, { type: blob.type })
       handleLocalFileUpload(file)
     }
   }
@@ -128,7 +131,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     </div>}
 
     <EmojiPickerInner className={cn(activeTab === 'emoji' ? 'block' : 'hidden', 'pt-2')} onSelect={handleSelectEmoji} />
-    <Uploader className={activeTab === 'image' ? 'block' : 'hidden'} onImageCropped={handleImageCropped} onUpload={handleUpload}/>
+    <ImageInput className={activeTab === 'image' ? 'block' : 'hidden'} onImageInput={handleImageInput} />
 
     <Divider className='m-0' />
     <div className='w-full flex items-center justify-center p-3 gap-2'>

web/app/components/base/app-icon-picker/utils.ts

@@ -116,12 +116,12 @@ export default async function getCroppedImg(
   })
 }
 
-export function checkIsAnimatedImage(file) {
+export function checkIsAnimatedImage(file: File): Promise<boolean> {
   return new Promise((resolve, reject) => {
     const fileReader = new FileReader()
 
     fileReader.onload = function (e) {
-      const arr = new Uint8Array(e.target.result)
+      const arr = new Uint8Array(e.target?.result as ArrayBuffer)
 
       // Check file extension
       const fileName = file.name.toLowerCase()
@@ -148,7 +148,7 @@ export function checkIsAnimatedImage(file) {
 }
 
 // Function to check for WebP signature
-function isWebP(arr) {
+function isWebP(arr: Uint8Array) {
   return (
     arr[0] === 0x52 && arr[1] === 0x49 && arr[2] === 0x46 && arr[3] === 0x46
     && arr[8] === 0x57 && arr[9] === 0x45 && arr[10] === 0x42 && arr[11] === 0x50
@@ -156,7 +156,7 @@ function isWebP(arr) {
 }
 
 // Function to check if the WebP is animated (contains ANIM chunk)
-function checkWebPAnimation(arr) {
+function checkWebPAnimation(arr: Uint8Array) {
   // Search for the ANIM chunk in WebP to determine if it's animated
   for (let i = 12; i < arr.length - 4; i++) {
     if (arr[i] === 0x41 && arr[i + 1] === 0x4E && arr[i + 2] === 0x49 && arr[i + 3] === 0x4D)