Fix file handling for none pdfs

frontend/src/components/pageEditor/FileThumbnail.tsx

@@ -201,6 +201,11 @@ const FileThumbnail = ({
             src={file.thumbnail}
             alt={file.name}
             draggable={false}
+            onError={(e) => {
+              // Hide broken image if blob URL was revoked
+              const img = e.target as HTMLImageElement;
+              img.style.display = 'none';
+            }}
             style={{
               maxWidth: '100%',
               maxHeight: '100%',
@@ -210,7 +215,8 @@ const FileThumbnail = ({
           />
         </div>
 
-        {/* Page count badge */}
+        {/* Page count badge - only show for PDFs */}
+        {file.pageCount > 0 && (
           <Badge
             size="sm"
             variant="filled"
@@ -224,6 +230,7 @@ const FileThumbnail = ({
           >
             {file.pageCount} {file.pageCount === 1 ? 'page' : 'pages'}
           </Badge>
+        )}
 
         {/* Unsupported badge */}
         {!isSupported && (

frontend/src/contexts/file/fileActions.ts

@@ -92,14 +92,28 @@ export async function addFiles(
         let thumbnail: string | undefined;
         let pageCount: number = 1;
         
+        // Route based on file type - PDFs through full metadata pipeline, non-PDFs through simple path
+        if (file.type.startsWith('application/pdf')) {
           try {
-          if (DEBUG) console.log(`📄 Generating immediate thumbnail and metadata for ${file.name}`);
+            if (DEBUG) console.log(`📄 Generating PDF metadata for ${file.name}`);
             const result = await generateThumbnailWithMetadata(file);
             thumbnail = result.thumbnail;
             pageCount = result.pageCount;
-          if (DEBUG) console.log(`📄 Generated immediate metadata for ${file.name}: ${pageCount} pages, thumbnail: ${!!thumbnail}`);
+            if (DEBUG) console.log(`📄 Generated PDF metadata for ${file.name}: ${pageCount} pages, thumbnail: ${!!thumbnail}`);
           } catch (error) {
-          if (DEBUG) console.warn(`📄 Failed to generate immediate metadata for ${file.name}:`, error);
+            if (DEBUG) console.warn(`📄 Failed to generate PDF metadata for ${file.name}:`, error);
+          }
+        } else {
+          // Non-PDF files: simple thumbnail generation, no page count
+          try {
+            if (DEBUG) console.log(`📄 Generating simple thumbnail for non-PDF file ${file.name}`);
+            const { generateThumbnailForFile } = await import('../../utils/thumbnailUtils');
+            thumbnail = await generateThumbnailForFile(file);
+            pageCount = 0; // Non-PDFs have no page count
+            if (DEBUG) console.log(`📄 Generated simple thumbnail for ${file.name}: no page count, thumbnail: ${!!thumbnail}`);
+          } catch (error) {
+            if (DEBUG) console.warn(`📄 Failed to generate simple thumbnail for ${file.name}:`, error);
+          }
         }
         
         // Create record with immediate thumbnail and page metadata
@@ -198,11 +212,13 @@ export async function addFiles(
           }
         }
         
-        // Generate processedFile metadata for stored files using PDF worker manager
-        // This ensures stored files have proper page information and avoids cancellation conflicts
+        // Generate processedFile metadata for stored files
         let pageCount: number = 1;
+        
+        // Only process PDFs through PDF worker manager, non-PDFs have no page count
+        if (file.type.startsWith('application/pdf')) {
           try {
-          if (DEBUG) console.log(`📄 addFiles(stored): Generating metadata for stored file ${file.name}`);
+            if (DEBUG) console.log(`📄 addFiles(stored): Generating PDF metadata for stored file ${file.name}`);
             
             // Use PDF worker manager directly for page count (avoids fileProcessingService conflicts)
             const arrayBuffer = await file.arrayBuffer();
@@ -211,9 +227,13 @@ export async function addFiles(
             pageCount = pdf.numPages;
             pdfWorkerManager.destroyDocument(pdf);
             
-          if (DEBUG) console.log(`📄 addFiles(stored): Found ${pageCount} pages in stored file ${file.name}`);
+            if (DEBUG) console.log(`📄 addFiles(stored): Found ${pageCount} pages in PDF ${file.name}`);
           } catch (error) {
-          if (DEBUG) console.warn(`📄 addFiles(stored): Failed to generate metadata for ${file.name}:`, error);
+            if (DEBUG) console.warn(`📄 addFiles(stored): Failed to generate PDF metadata for ${file.name}:`, error);
+          }
+        } else {
+          pageCount = 0; // Non-PDFs have no page count
+          if (DEBUG) console.log(`📄 addFiles(stored): Non-PDF file ${file.name}, no page count`);
         }
         
         // Create processedFile metadata with correct page count

frontend/src/contexts/file/lifecycle.ts

@@ -144,11 +144,14 @@ export class FileLifecycleManager {
     if (stateRef) {
       const record = stateRef.current.files.byId[fileId];
       if (record) {
-        // Revoke blob URLs from file record
+        // Defer revocation of thumbnail blob URLs to prevent image loading race conditions
         if (record.thumbnailUrl && record.thumbnailUrl.startsWith('blob:')) {
           try {
+            // Add a small delay to ensure images have time to load
+            setTimeout(() => {
               URL.revokeObjectURL(record.thumbnailUrl);
               if (DEBUG) console.log(`🗂️ Revoked thumbnail blob URL for file: ${fileId}`);
+            }, 1000); // 1 second delay
           } catch (error) {
             if (DEBUG) console.warn('Error revoking thumbnail URL:', error);
           }
@@ -156,20 +159,27 @@ export class FileLifecycleManager {
         
         if (record.blobUrl && record.blobUrl.startsWith('blob:')) {
           try {
+            // Add a small delay to ensure any pending operations complete
+            setTimeout(() => {
               URL.revokeObjectURL(record.blobUrl);
               if (DEBUG) console.log(`🗂️ Revoked file blob URL for file: ${fileId}`);
+            }, 1000); // 1 second delay
           } catch (error) {
             if (DEBUG) console.warn('Error revoking file URL:', error);
           }
         }
         
-        // Clean up processed file thumbnails
+        // Clean up processed file thumbnails with delay
         if (record.processedFile?.pages) {
           record.processedFile.pages.forEach((page: ProcessedFilePage, index: number) => {
             if (page.thumbnail && page.thumbnail.startsWith('blob:')) {
               try {
-                URL.revokeObjectURL(page.thumbnail);
+                const thumbnailUrl = page.thumbnail;
+                // Add delay for page thumbnails too
+                setTimeout(() => {
+                  URL.revokeObjectURL(thumbnailUrl);
                   if (DEBUG) console.log(`🗂️ Revoked page ${index} thumbnail for file: ${fileId}`);
+                }, 1000); // 1 second delay
               } catch (error) {
                 if (DEBUG) console.warn('Error revoking page thumbnail URL:', error);
               }

frontend/src/utils/thumbnailUtils.ts

@@ -368,10 +368,10 @@ export async function generateThumbnailForFile(file: File): Promise<string | und
  * Generate thumbnail and extract page count for a PDF file
  */
 export async function generateThumbnailWithMetadata(file: File): Promise<ThumbnailWithMetadata> {
-  // Non-PDF files default to 1 page
+  // Non-PDF files have no page count
   if (!file.type.startsWith('application/pdf')) {
     const thumbnail = await generateThumbnailForFile(file);
-    return { thumbnail, pageCount: 1 };
+    return { thumbnail, pageCount: 0 };
   }
 
   // Skip very large files