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/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;
+}