Merge pull request #8 from cloudinary-community/feat/heic

Adds support for .heic file type

package.json

@@ -19,6 +19,7 @@
     "clsx": "^2.1.1",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.17",
+    "heic2any": "0.0.4",
     "jszip": "^3.10.1",
     "lucide-react": "^0.378.0",
     "next": "^14.2.3",

src/components/WidgetUpload/WidgetUpload.tsx

@@ -343,6 +343,8 @@ const WidgetUpload = ({ className }: WidgetUploadProps) => {
             'image/png': ['.png'],
             'image/webp': ['.webp'],
             'image/jxl': ['.jxl'],
+            'image/heif': ['.heic', '.heif'],
+            'image/heic': ['.heic'],
           }}
           onDrop={(droppedFile) => {
             const dropDate = Date.now();

src/lib/image.ts

@@ -36,7 +36,7 @@ interface ReadImageReturn {
 }
 
 export function readImage(file: File): Promise<ReadImageReturn> {
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
     const reader = new FileReader;
 
     reader.onload = function() {
@@ -56,8 +56,19 @@ export function readImage(file: File): Promise<ReadImageReturn> {
       img.src = reader.result as string;
     };
 
+    // HEIF/HEIC files aren't currently supported in most desktop browsers meaning 
+    // if we try to decode them, we'll get an error. This allows us to support these
+    // file types loading asynchronously a package that decode it for us into a jpg
+
+    const isHeif = file.type === 'image/heif' || file.type === 'image/heic';
+
+    if ( isHeif && typeof window !== 'undefined' ) {
+      const heic2any = (await import('heic2any')).default;
+      file = await heic2any({ blob: file, toType: 'image/jpeg' }) as File;
+    }
+
     reader.readAsDataURL(file);
-  })  
+  })
 }
 
 /**
@@ -71,6 +82,8 @@ const formatsMap: Record<string, string> = {
   jxl: 'JXL',
   png: 'PNG',
   webp: 'WebP',
+  heif: 'HEIF',
+  heic: 'HEIC',
 }
 
 export function getImageFormatFromType(type: string, formatted = false) {

src/types/image.ts

@@ -12,6 +12,7 @@ export interface ImageUpload {
   optimized?: ImageDownload;
   avif?: ImageDownload;
   webp?: ImageDownload;
+  heic?: ImageDownload;
   jpeg?: ImageDownload;
   jxl?: ImageDownload;
   width?: number;