Fix inline display of PNG, JPG and PDF files in document viewer

Author: Bob Strahan

CHANGELOG.md

@@ -23,21 +23,11 @@ SPDX-License-Identifier: MIT-0
   - Markdown table headers now explicitly left-aligned using `|:-----|:-----------|` format for consistent appearance
 
 
-
 ### Fixed
-- **OCR Service Image Processing for PNG/JPG Files**
-  - Fixed issue where PNG files were being unnecessarily converted to JPEG format and resized
-  - PNG and JPG files now preserve their original format when stored in S3
-  - Image resolution is preserved by default unless explicitly configured via `resize_config`
-  - DPI settings now only apply to PDF files, not to image files
-  - Resolves issue where PNG files were being converted to lower resolution JPG files
-- **Image File Display in Document Viewer**
-  - Fixed issue where PNG and JPG image files were not rendering inline in the Document Details page
-  - Images were incorrectly loaded in iframes which caused browsers to download them instead of displaying
-  - Added specific handling for image file types to use `<img>` tag instead of iframe
-  - Images now display inline with responsive sizing (max-width: 100%, max-height: 800px)
-  - Added error handling with fallback download link if image fails to load
-  - Maintains consistent UI with other document types (PDF, Excel, Word)
+- Fixed issue where PNG files were being unnecessarily converted to JPEG format and resized to lower resolution with lost quality
+- Fixed issue where PNG and JPG image files were not rendering inline in the Document Details page
+- Fixed issue where PDF files were being downloaded instead of displayed inline
+
 
 
 ## [0.3.7]

src/ui/src/components/common/generate-s3-presigned-url.js

@@ -34,7 +34,7 @@ const parseS3Url = (s3Url) => {
   return { bucket, key };
 };
 
-const generateS3PresignedUrl = async (url, credentials) => {
+const generateS3PresignedUrl = async (url, credentials, options = {}) => {
   // If it's already a special URL (like detailType), return as is
   if (url.includes('detailType')) {
     return url;
@@ -72,7 +72,24 @@ const generateS3PresignedUrl = async (url, credentials) => {
 
     // Parse the URL for the presigner
     const s3ObjectUrl = parseUrl(newUrl);
+
+    // Determine file type from key to set appropriate content disposition
+    const fileExtension = key.split('.').pop().toLowerCase();
+    const isDisplayableFile = ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(fileExtension);
+
+    // Add query parameters for inline display if it's a displayable file type
+    if (isDisplayableFile && options.forceInline !== false) {
+      s3ObjectUrl.query = s3ObjectUrl.query || {};
+      s3ObjectUrl.query['response-content-disposition'] = 'inline';
+
+      // Set appropriate content type for PDFs to ensure proper display
+      if (fileExtension === 'pdf') {
+        s3ObjectUrl.query['response-content-type'] = 'application/pdf';
+      }
+    }
+
     logger.debug('Canonical URL:', newUrl);
+    logger.debug('Query parameters:', s3ObjectUrl.query);
 
     // Create presigner instance
     const presigner = new S3RequestPresigner({