handeling pc heif error, showing user it is not supported

Hilichiu · Hilichiu · commit bc76a14c1fd0 · 2025-08-10T10:53:12.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,4 +37,4 @@
     "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2"
   }
-}
+}
diff --git a/src/components/PhotoUploader.tsx b/src/components/PhotoUploader.tsx
@@ -21,9 +21,15 @@ const PhotoUploader: React.FC<PhotoUploaderProps> = ({ photos, onPhotosChange })
     setIsProcessing(true);
 
     try {
-      const fileArray = Array.from(files).filter(file =>
-        file.type.startsWith('image/') || file.type.startsWith('video/')
-      );
+      // Filter files to include images, videos, and HEIF files (by extension)
+      const fileArray = Array.from(files).filter(file => {
+        const isImage = file.type.startsWith('image/');
+        const isVideo = file.type.startsWith('video/');
+        // Check for HEIF files by extension (some systems don't set proper MIME types)
+        const isHeif = /\.(heic|heif)$/i.test(file.name);
+
+        return isImage || isVideo || isHeif;
+      });
 
       if (fileArray.length === 0) {
         alert(t('selectImageVideoOnly'));
@@ -55,6 +61,19 @@ const PhotoUploader: React.FC<PhotoUploaderProps> = ({ photos, onPhotosChange })
       // Create optimized photos with thumbnails
       const newOptimizedPhotos = await createOptimizedPhotos(filesToProcess);
 
+      // Check if any HEIF files were detected (not supported)
+      const heifFiles = newOptimizedPhotos.filter(photo =>
+        photo.name.includes('(HEIF not supported)')
+      );
+
+      if (heifFiles.length > 0) {
+        const heifNames = heifFiles.map(photo =>
+          photo.name.replace(' (HEIF not supported)', '')
+        ).join(', ');
+
+        alert(`Info: ${heifFiles.length} HEIF file(s) detected: ${heifNames}. HEIF format is not supported by web browsers. Please convert these files to JPEG for best results.`);
+      }
+
       // Convert to Photo interface
       const newPhotos: Photo[] = newOptimizedPhotos.map(optimized => ({
         id: optimized.id,
@@ -71,7 +90,13 @@ const PhotoUploader: React.FC<PhotoUploaderProps> = ({ photos, onPhotosChange })
       onPhotosChange([...photos, ...newPhotos]);
     } catch (error) {
       console.error('Error processing photos:', error);
-      alert('Error processing some photos. Please try again.');
+
+      // Provide specific error message for HEIF conversion issues
+      const errorMessage = error instanceof Error && error.message.includes('HEIF')
+        ? 'Error converting HEIF/HEIC files. Please try converting them to JPEG first, or use a different image format.'
+        : 'Error processing some photos. Please try again.';
+
+      alert(errorMessage);
     } finally {
       setIsProcessing(false);
       // Reset the input value
@@ -94,7 +119,7 @@ const PhotoUploader: React.FC<PhotoUploaderProps> = ({ photos, onPhotosChange })
         ref={fileInputRef}
         type="file"
         multiple
-        accept="image/*,video/*"
+        accept="image/*,video/*,.heic,.heif"
         onChange={handleFileSelect}
         className="hidden"
       />
@@ -125,27 +150,35 @@ const PhotoUploader: React.FC<PhotoUploaderProps> = ({ photos, onPhotosChange })
             {t('selectedPhotos', { count: photos.length.toString() })}
           </div>
           <div className="grid grid-cols-4 sm:grid-cols-4 md:grid-cols-4 gap-3 max-h-80 overflow-y-auto overflow-x-hidden p-2">
-            {photos.map((photo, index) => (
-              <div key={photo.id} className="relative group">
-                <div className="aspect-square bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden">
-                  <img
-                    src={photo.thumbnailUrl || photo.url}
-                    alt={`Photo ${index + 1}`}
-                    className="w-full h-full object-cover"
-                    loading="lazy"
-                  />
-                </div>
-                <button
-                  onClick={() => removePhoto(photo.id)}
-                  className="absolute top-1 right-1 p-1 bg-red-500 hover:bg-red-600 text-white rounded-full transition-colors duration-200 shadow-lg"
-                >
-                  <X className="w-3 h-3" />
-                </button>
-                <div className="absolute bottom-1 left-1 bg-black bg-opacity-50 text-white text-xs px-1 py-0.5 rounded">
-                  #{index + 1}
+            {photos.map((photo, index) => {
+              const isHeifFile = photo.name.includes('(HEIF not supported)');
+              return (
+                <div key={photo.id} className="relative group">
+                  <div className={`aspect-square bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden ${isHeifFile ? 'border-2 border-yellow-400' : ''}`}>
+                    <img
+                      src={photo.thumbnailUrl || photo.url}
+                      alt={`Photo ${index + 1}`}
+                      className="w-full h-full object-cover"
+                      loading="lazy"
+                    />
+                    {isHeifFile && (
+                      <div className="absolute top-1 left-1 bg-yellow-500 text-white text-xs px-1 py-0.5 rounded">
+                        HEIF
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    onClick={() => removePhoto(photo.id)}
+                    className="absolute top-1 right-1 p-1 bg-red-500 hover:bg-red-600 text-white rounded-full transition-colors duration-200 shadow-lg"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                  <div className="absolute bottom-1 left-1 bg-black bg-opacity-50 text-white text-xs px-1 py-0.5 rounded">
+                    #{index + 1}
+                  </div>
                 </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         </div>
       )}
diff --git a/src/types/heic2any.d.ts b/src/types/heic2any.d.ts
@@ -0,0 +1,19 @@
+declare module 'heic2any' {
+    interface ConvertOptions {
+        blob: Blob;
+        toType: string;
+        quality?: number;
+    }
+
+    function heic2any(options: ConvertOptions): Promise<Blob | Blob[]>;
+    export default heic2any;
+}
+
+declare module 'libheif-js' {
+    interface LibHeif {
+        HeifDecoder: any;
+    }
+
+    const libheif: LibHeif;
+    export default libheif;
+}
diff --git a/src/utils/imageOptimization.ts b/src/utils/imageOptimization.ts
@@ -14,6 +14,75 @@ export interface OptimizedPhoto {
     duration?: number;
 }
 
+/**
+ * Checks if a file is a HEIF/HEIC image
+ */
+function isHeifFile(file: File): boolean {
+    const heifMimeTypes = ['image/heic', 'image/heif'];
+    const heifExtensions = ['.heic', '.heif'];
+
+    // Check MIME type
+    if (heifMimeTypes.includes(file.type.toLowerCase())) {
+        return true;
+    }
+
+    // Check file extension as fallback
+    const fileName = file.name.toLowerCase();
+    return heifExtensions.some(ext => fileName.endsWith(ext));
+}
+
+/**
+ * Creates a placeholder image for failed HEIF conversions
+ */
+function createHeifPlaceholderImage(fileName: string): Blob {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    // Set canvas size
+    canvas.width = 400;
+    canvas.height = 400;
+
+    if (ctx) {
+        // Draw a gray background
+        ctx.fillStyle = '#f3f4f6';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Draw border
+        ctx.strokeStyle = '#d1d5db';
+        ctx.lineWidth = 2;
+        ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);
+
+        // Draw text
+        ctx.fillStyle = '#6b7280';
+        ctx.font = 'bold 16px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText('HEIF Format', canvas.width / 2, 150);
+        ctx.fillText('Not Supported', canvas.width / 2, 180);
+
+        ctx.font = '12px Arial';
+        ctx.fillText('Please convert to JPEG', canvas.width / 2, 220);
+        ctx.fillText('and re-upload', canvas.width / 2, 240);
+
+        // Draw file name (truncated if too long)
+        const displayName = fileName.length > 30 ? fileName.substring(0, 27) + '...' : fileName;
+        ctx.font = '10px Arial';
+        ctx.fillText(displayName, canvas.width / 2, 280);
+    }
+
+    // Convert to blob synchronously 
+    const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
+    const byteString = atob(dataUrl.split(',')[1]);
+    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+
+    for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+
+    return new Blob([ab], { type: mimeString });
+}
+
 /**
  * Creates a thumbnail version of an image file
  */
@@ -132,22 +201,44 @@ export function createVideoThumbnail(file: File, maxSize: number = 400, seekTime
  */
 export async function createOptimizedPhotos(files: File[]): Promise<OptimizedPhoto[]> {
     const promises = files.map(async (file) => {
+        const id = Math.random().toString(36).substr(2, 9);
+
+        // Check for HEIF files and immediately create placeholder (no conversion attempt)
+        if (isHeifFile(file)) {
+            console.log(`HEIF file detected: ${file.name} - Creating placeholder (no conversion attempted)`);
+
+            const placeholderBlob = createHeifPlaceholderImage(file.name);
+            const placeholderUrl = URL.createObjectURL(placeholderBlob);
+
+            return {
+                id,
+                file: new File([placeholderBlob], file.name.replace(/\.(heic|heif)$/i, '_heif_not_supported.jpg'), {
+                    type: 'image/jpeg',
+                    lastModified: file.lastModified
+                }),
+                url: placeholderUrl,
+                thumbnailUrl: placeholderUrl,
+                name: file.name + ' (HEIF not supported)',
+                type: 'image' as const
+            };
+        }
+
+        // Process regular image/video files
         const isImage = file.type.startsWith('image/');
         const isVideo = file.type.startsWith('video/');
 
         if (!isImage && !isVideo) {
             throw new Error(`Invalid file type: ${file.type}`);
         }
 
-        const id = Math.random().toString(36).substr(2, 9);
         const url = URL.createObjectURL(file);
 
         try {
             if (isImage) {
                 const thumbnailUrl = await createThumbnail(file, 400);
                 return {
                     id,
-                    file,
+                    file: file,
                     url,
                     thumbnailUrl,
                     name: file.name,
@@ -158,7 +249,7 @@ export async function createOptimizedPhotos(files: File[]): Promise<OptimizedPho
                 const { thumbnailUrl, duration } = await createVideoThumbnail(file, 400);
                 return {
                     id,
-                    file,
+                    file: file,
                     url,
                     thumbnailUrl,
                     name: file.name,
@@ -171,7 +262,7 @@ export async function createOptimizedPhotos(files: File[]): Promise<OptimizedPho
             console.warn('Thumbnail creation failed for', file.name, error);
             return {
                 id,
-                file,
+                file: file,
                 url,
                 thumbnailUrl: url,
                 name: file.name,

Original file line number	Diff line number	Diff line change
`@@ -37,4 +37,4 @@`
`37`	`37`	`"typescript-eslint": "^8.3.0",`
`38`	`38`	`"vite": "^5.4.2"`
`39`	`39`	`}`
`40`		`-}`
	`40`	`+}`