Handle non-pdf gracefully in viewer (#5004)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/public/locales/en-GB/translation.json

@@ -3890,14 +3890,17 @@
     "actualSize": "Actual Size"
   },
   "viewer": {
+    "cannotPreviewFile": "Cannot Preview File",
+    "dualPageView": "Dual Page View",
     "firstPage": "First Page",
     "lastPage": "Last Page",
-    "previousPage": "Previous Page",
     "nextPage": "Next Page",
-    "zoomIn": "Zoom In",
+    "onlyPdfSupported": "The viewer only supports PDF files. This file appears to be a different format.",
-    "zoomOut": "Zoom Out",
+    "previousPage": "Previous Page",
     "singlePageView": "Single Page View",
-    "dualPageView": "Dual Page View"
+    "unknownFile": "Unknown file",
+    "zoomIn": "Zoom In",
+    "zoomOut": "Zoom Out"
   },
   "rightRail": {
     "closeSelected": "Close Selected Files",

frontend/src/core/components/viewer/LocalEmbedPDF.tsx

@@ -41,6 +41,8 @@ import { HistoryAPIBridge } from '@app/components/viewer/HistoryAPIBridge';
 import type { SignatureAPI, HistoryAPI } from '@app/components/viewer/viewerTypes';
 import { ExportAPIBridge } from '@app/components/viewer/ExportAPIBridge';
 import { BookmarkAPIBridge } from '@app/components/viewer/BookmarkAPIBridge';
+import { isPdfFile } from '@app/utils/fileUtils';
+import { useTranslation } from 'react-i18next';
 
 interface LocalEmbedPDFProps {
   file?: File | Blob;
@@ -52,6 +54,7 @@ interface LocalEmbedPDFProps {
 }
 
 export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatureAdded, signatureApiRef, historyApiRef }: LocalEmbedPDFProps) {
+  const { t } = useTranslation();
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
   const [, setAnnotations] = useState<Array<{id: string, pageIndex: number, rect: any}>>([]);
 
@@ -171,6 +174,29 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
     );
   }
 
+  // Check if the file is actually a PDF
+  if (file && !isPdfFile(file)) {
+    const fileName = 'name' in file ? file.name : t('viewer.unknownFile');
+    return (
+      <Center h="100%" w="100%">
+        <Stack align="center" gap="md">
+          <div style={{ fontSize: '48px' }}>📄</div>
+          <Text size="lg" fw={600} c="dimmed">
+            {t('viewer.cannotPreviewFile')}
+          </Text>
+          <Text c="dimmed" size="sm" style={{ textAlign: 'center', maxWidth: '400px' }}>
+            {t('viewer.onlyPdfSupported')}
+          </Text>
+          <PrivateContent>
+            <Text c="dimmed" size="xs" style={{ fontFamily: 'monospace' }}>
+              {fileName}
+            </Text>
+          </PrivateContent>
+        </Stack>
+      </Center>
+    );
+  }
+
   if (isLoading || !engine || !pdfUrl) {
     return <ToolLoadingFallback toolName="PDF Engine" />;
   }

frontend/src/core/utils/fileUtils.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest';
+import { isPdfFile, detectFileExtension, formatFileSize } from '@app/utils/fileUtils';
+
+describe('fileUtils', () => {
+  describe('isPdfFile', () => {
+    it('should return true for PDF files with correct MIME type', () => {
+      const pdfFile = new File(['content'], 'document.pdf', { type: 'application/pdf' });
+      expect(isPdfFile(pdfFile)).toBe(true);
+    });
+
+    it('should return true for PDF files with .pdf extension even without MIME type', () => {
+      const pdfFile = new File(['content'], 'document.pdf', { type: '' });
+      expect(isPdfFile(pdfFile)).toBe(true);
+    });
+
+    it('should return false for non-PDF files', () => {
+      const txtFile = new File(['content'], 'document.txt', { type: 'text/plain' });
+      expect(isPdfFile(txtFile)).toBe(false);
+    });
+
+    it('should return false for image files', () => {
+      const imageFile = new File(['content'], 'image.png', { type: 'image/png' });
+      expect(isPdfFile(imageFile)).toBe(false);
+    });
+
+    it('should return false for null', () => {
+      expect(isPdfFile(null)).toBe(false);
+    });
+
+    it('should return false for undefined', () => {
+      expect(isPdfFile(undefined)).toBe(false);
+    });
+
+    it('should handle file-like objects with name and type', () => {
+      const fileLike = { name: 'test.pdf', type: 'application/pdf' };
+      expect(isPdfFile(fileLike)).toBe(true);
+    });
+
+    it('should handle file-like objects with PDF extension but no type', () => {
+      const fileLike = { name: 'test.pdf', type: '' };
+      expect(isPdfFile(fileLike)).toBe(true);
+    });
+  });
+
+  describe('detectFileExtension', () => {
+    it('should detect PDF extension', () => {
+      expect(detectFileExtension('document.pdf')).toBe('pdf');
+    });
+
+    it('should detect extension in uppercase', () => {
+      expect(detectFileExtension('document.PDF')).toBe('pdf');
+    });
+
+    it('should return empty string for files without extension', () => {
+      expect(detectFileExtension('document')).toBe('');
+    });
+
+    it('should handle multiple dots in filename', () => {
+      expect(detectFileExtension('my.document.pdf')).toBe('pdf');
+    });
+
+    it('should normalize jpeg to jpg', () => {
+      expect(detectFileExtension('image.jpeg')).toBe('jpg');
+    });
+  });
+
+  describe('formatFileSize', () => {
+    it('should format bytes', () => {
+      expect(formatFileSize(0)).toBe('0 B');
+      expect(formatFileSize(500)).toBe('500 B');
+    });
+
+    it('should format kilobytes', () => {
+      expect(formatFileSize(1024)).toBe('1 KB');
+      expect(formatFileSize(2048)).toBe('2 KB');
+    });
+
+    it('should format megabytes', () => {
+      expect(formatFileSize(1024 * 1024)).toBe('1 MB');
+      expect(formatFileSize(5 * 1024 * 1024)).toBe('5 MB');
+    });
+
+    it('should format gigabytes', () => {
+      expect(formatFileSize(1024 * 1024 * 1024)).toBe('1 GB');
+    });
+  });
+});

frontend/src/core/utils/fileUtils.ts

@@ -51,3 +51,26 @@ export function detectFileExtension(filename: string): string {
 
   return extension;
 }
+
+/**
+ * Checks if a file is a PDF based on extension and MIME type
+ * @param file - File or file-like object with name and type properties
+ * @returns true if the file appears to be a PDF
+ */
+export function isPdfFile(file: { name?: string; type?: string } | File | Blob | null | undefined): boolean {
+  if (!file) return false;
+
+  const name = 'name' in file ? file.name : undefined;
+  const type = file.type;
+
+  // Check MIME type first (most reliable)
+  if (type === 'application/pdf') return true;
+
+  // Check file extension as fallback
+  if (name) {
+    const ext = detectFileExtension(name);
+    if (ext === 'pdf') return true;
+  }
+
+  return false;
+}