feat: support display tiff and heic image (#321)

Author: appflowy

package.json

@@ -110,6 +110,7 @@
     "framer-motion": "^12.6.3",
     "google-protobuf": "^3.15.12",
     "hast-util-to-mdast": "^10.1.0",
+    "heic2any": "^0.0.4",
     "highlight.js": "^11.10.0",
     "html-parse-stringify": "^3.0.1",
     "i18next": "^22.4.10",
@@ -178,6 +179,7 @@
     "unist-util-visit": "^5.0.0",
     "unsplash-js": "^7.0.19",
     "utf8": "^3.0.0",
+    "utif": "^3.1.0",
     "uuid": "^14.0.0",
     "validator": "^13.15.22",
     "y-indexeddb": "9.0.12",
@@ -223,6 +225,7 @@
     "@types/react-transition-group": "^4.4.6",
     "@types/react-window": "^1.8.8",
     "@types/utf8": "^3.0.1",
+    "@types/utif": "^3.0.6",
     "@types/validator": "^13.11.9",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

pnpm-lock.yaml

@@ -5,7 +5,7 @@ import { FileMediaType } from '@/application/database-yjs/cell.type';
  * @param filename - The name or url of the file to check.
  */
 export function getFileMediaType (filename: string) {
-  const imgExtensionRegex = /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i;
+  const imgExtensionRegex = /\.(gif|jpe?g|tiff?|png|webp|bmp|heic|heif)$/i;
   const videoExtensionRegex = /\.(mp4|mov|avi|webm|flv|m4v|mpeg|h264)$/i;
   const audioExtensionRegex = /\.(mp3|wav|ogg|flac|aac|wma|alac|aiff)$/i;
   const documentExtensionRegex = /\.(pdf|doc|docx)$/i;

src/application/database-yjs/fields/media/utils.ts

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import FileDropzone from '@/components/_shared/file-dropzone/FileDropzone';
 import { notify } from '@/components/_shared/notify';
 
-export const ALLOWED_IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'];
+export const ALLOWED_IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'tif', 'tiff', 'heic', 'heif'];
 
 export function UploadImage({
   onDone,

src/components/_shared/image-upload/UploadImage.tsx

@@ -1,5 +1,6 @@
 import { getTokenParsed } from '@/application/session/token';
 import { isAppFlowyFileStorageUrl } from '@/utils/file-storage-url';
+import { transcodeIfUnsupported } from '@/utils/image';
 import { Log } from '@/utils/log';
 import { getConfigValue } from '@/utils/runtime-config';
 
@@ -43,7 +44,8 @@ export async function fetchAuthenticatedImage(url: string, token = getTokenParse
     }
 
     const blob = await response.blob();
-    const blobUrl = URL.createObjectURL(blob);
+    const renderableBlob = await transcodeIfUnsupported(blob, url);
+    const blobUrl = URL.createObjectURL(renderableBlob);
 
     return blobUrl;
   } catch (error) {

src/utils/authenticated-image.ts

@@ -3,6 +3,73 @@ import { isAppFlowyFileStorageUrl } from '@/utils/file-storage-url';
 import { Log } from '@/utils/log';
 import { getConfigValue } from '@/utils/runtime-config';
 
+const HEIC_MIME_TYPES = new Set(['image/heic', 'image/heif', 'image/heic-sequence', 'image/heif-sequence']);
+const TIFF_MIME_TYPES = new Set(['image/tiff', 'image/tif', 'image/x-tiff']);
+const HEIC_EXT_REGEX = /\.(heic|heif)(\?.*)?$/i;
+const TIFF_EXT_REGEX = /\.(tiff?)(\?.*)?$/i;
+
+const isHeicBlob = (blob: Blob, url?: string): boolean => {
+  if (HEIC_MIME_TYPES.has(blob.type)) return true;
+  return !!url && HEIC_EXT_REGEX.test(url);
+};
+
+const isTiffBlob = (blob: Blob, url?: string): boolean => {
+  if (TIFF_MIME_TYPES.has(blob.type)) return true;
+  return !!url && TIFF_EXT_REGEX.test(url);
+};
+
+/**
+ * Browsers (other than Safari) cannot decode HEIC/HEIF or TIFF natively.
+ * Transcode such blobs to PNG client-side so a regular <img> can render them.
+ */
+export const transcodeIfUnsupported = async (blob: Blob, url?: string): Promise<Blob> => {
+  try {
+    if (isHeicBlob(blob, url)) {
+      const heic2any = (await import('heic2any')).default;
+      const result = await heic2any({ blob, toType: 'image/png' });
+
+      return Array.isArray(result) ? result[0] : result;
+    }
+
+    if (isTiffBlob(blob, url)) {
+      const utifMod = await import('utif');
+      const UTIF = ((utifMod as unknown) as { default?: typeof import('utif') }).default ?? utifMod;
+      const arrayBuffer = await blob.arrayBuffer();
+      const ifds = UTIF.decode(arrayBuffer);
+
+      if (!ifds.length) {
+        throw new Error('No image frames found in TIFF');
+      }
+
+      UTIF.decodeImage(arrayBuffer, ifds[0]);
+      const rgba = UTIF.toRGBA8(ifds[0]);
+      const { width, height } = ifds[0];
+      const canvas = document.createElement('canvas');
+
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) throw new Error('Failed to get canvas context');
+      const clamped = new Uint8ClampedArray(rgba.buffer, rgba.byteOffset, rgba.byteLength);
+      const imageData = new ImageData(clamped, width, height);
+
+      ctx.putImageData(imageData, 0, 0);
+
+      return await new Promise<Blob>((resolve, reject) => {
+        canvas.toBlob((pngBlob) => {
+          if (pngBlob) resolve(pngBlob);
+          else reject(new Error('Failed to encode TIFF as PNG'));
+        }, 'image/png');
+      });
+    }
+  } catch (error) {
+    Log.error('Failed to transcode unsupported image format', error);
+  }
+
+  return blob;
+};
+
 const resolveImageUrl = (url: string): string => {
   if (!url) return '';
   return url.startsWith('http') ? url : `${getConfigValue('APPFLOWY_BASE_URL', '')}${url}`;
@@ -70,16 +137,18 @@ const validateImageBlob = async (blob: Blob, url?: string): Promise<Blob | null>
     return null;
   }
 
+  let normalizedBlob = blob;
+
   // If the blob type is generic or missing, try to infer from URL
-  if ((!blob.type || blob.type === 'application/octet-stream') && url) {
+  if ((!normalizedBlob.type || normalizedBlob.type === 'application/octet-stream') && url) {
     const inferredType = getMimeTypeFromUrl(url);
 
     if (inferredType) {
-      return blob.slice(0, blob.size, inferredType);
+      normalizedBlob = normalizedBlob.slice(0, normalizedBlob.size, inferredType);
     }
   }
 
-  return blob;
+  return transcodeIfUnsupported(normalizedBlob, url);
 };
 
 export const checkImage = async (url: string): Promise<CheckImageResult> => {
@@ -169,18 +238,18 @@ export const fetchImageBlob = async (url: string): Promise<Blob | null> => {
       const response = await fetch(url);
 
       if (response.ok) {
-        const blob = await response.blob();
+        let blob = await response.blob();
 
         // If the blob type is generic or missing, try to infer from URL
         if ((!blob.type || blob.type === 'application/octet-stream') && url) {
           const inferredType = getMimeTypeFromUrl(url);
 
           if (inferredType) {
-            return blob.slice(0, blob.size, inferredType);
+            blob = blob.slice(0, blob.size, inferredType);
           }
         }
 
-        return blob;
+        return transcodeIfUnsupported(blob, url);
       }
     } catch (error) {
       return null;
@@ -250,6 +319,15 @@ const getMimeTypeFromUrl = (url: string): string | null => {
       return 'image/webp';
     case 'svg':
       return 'image/svg+xml';
+    case 'bmp':
+      return 'image/bmp';
+    case 'tif':
+    case 'tiff':
+      return 'image/tiff';
+    case 'heic':
+      return 'image/heic';
+    case 'heif':
+      return 'image/heif';
     default:
       return null;
   }