feat(ui): add auto-refresh after upload and inline file preview

- Auto-refresh files table after successful uploads using custom event
- Add inline preview support for PDFs, images, and text files
- Set Content-Disposition header to inline for preview endpoint
- Add download button as secondary action in file details view

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

app/api/files.py

@@ -568,7 +568,7 @@ def get_file_preview(
         return FileResponse(
             path=file_path,
             media_type=file_record.mime_type or "application/pdf",
-            filename=file_record.original_filename,
+            headers={"Content-Disposition": f'inline; filename="{file_record.original_filename}"'},
         )
 
     except HTTPException:

frontend/static/js/upload.js

@@ -195,6 +195,12 @@ function updateOverallStatus(statusMessage) {
   
   if (completed === total) {
     statusMessage.textContent = `All uploads completed (${completed}/${total})`;
+    
+    // Trigger a custom event when all uploads are complete
+    const allUploadsComplete = new CustomEvent('allUploadsComplete', {
+      detail: { total: total, completed: completed }
+    });
+    window.dispatchEvent(allUploadsComplete);
   } else {
     statusMessage.textContent = `Uploading files (${completed}/${total})`;
   }

frontend/templates/file_detail.html

@@ -863,12 +863,24 @@
       <div>
         <h4 style="font-weight: 600; color: #2d3748; margin-bottom: 1rem;">Original File</h4>
         <div style="border: 2px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; background-color: #f7fafc;">
-          <embed src="/api/files/{{ file.id }}/preview?version=original" type="application/pdf" width="100%" height="600px" style="border: none;">
+          {% if file.mime_type and file.mime_type.startswith('image/') %}
+          <!-- Image preview -->
+          <img src="/api/files/{{ file.id }}/preview?version=original" alt="{{ file.original_filename }}" style="width: 100%; height: auto; display: block;">
+          {% elif file.mime_type and file.mime_type.startswith('text/') %}
+          <!-- Text file preview -->
+          <iframe src="/api/files/{{ file.id }}/preview?version=original" style="width: 100%; height: 600px; border: none;"></iframe>
+          {% else %}
+          <!-- PDF and other documents -->
+          <iframe src="/api/files/{{ file.id }}/preview?version=original" type="application/pdf" style="width: 100%; height: 600px; border: none;"></iframe>
+          {% endif %}
         </div>
-        <div style="margin-top: 0.5rem; text-align: center;">
+        <div style="margin-top: 0.5rem; text-align: center; display: flex; gap: 1rem; justify-content: center;">
           <a href="/api/files/{{ file.id }}/preview?version=original" target="_blank" style="color: #3182ce; text-decoration: none; font-size: 0.875rem;">
             <i class="fas fa-external-link-alt"></i> Open in new tab
           </a>
+          <a href="/api/files/{{ file.id }}/preview?version=original" download="{{ file.original_filename }}" style="color: #3182ce; text-decoration: none; font-size: 0.875rem;">
+            <i class="fas fa-download"></i> Download
+          </a>
         </div>
       </div>
       {% endif %}
@@ -877,12 +889,16 @@
       <div>
         <h4 style="font-weight: 600; color: #2d3748; margin-bottom: 1rem;">Processed File</h4>
         <div style="border: 2px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; background-color: #f7fafc;">
-          <embed src="/api/files/{{ file.id }}/preview?version=processed" type="application/pdf" width="100%" height="600px" style="border: none;">
+          <!-- Processed files are typically PDFs -->
+          <iframe src="/api/files/{{ file.id }}/preview?version=processed" type="application/pdf" style="width: 100%; height: 600px; border: none;"></iframe>
         </div>
-        <div style="margin-top: 0.5rem; text-align: center;">
+        <div style="margin-top: 0.5rem; text-align: center; display: flex; gap: 1rem; justify-content: center;">
           <a href="/api/files/{{ file.id }}/preview?version=processed" target="_blank" style="color: #3182ce; text-decoration: none; font-size: 0.875rem;">
             <i class="fas fa-external-link-alt"></i> Open in new tab
           </a>
+          <a href="/api/files/{{ file.id }}/preview?version=processed" download="{{ file.original_filename }}" style="color: #3182ce; text-decoration: none; font-size: 0.875rem;">
+            <i class="fas fa-download"></i> Download
+          </a>
         </div>
       </div>
       {% endif %}

frontend/templates/files.html

@@ -835,27 +835,17 @@
         
         // Process the dropped files
         processFiles(e.dataTransfer.files, uploadProgressContainer, uploadStatusMessage);
-        
-        // Optionally reload page after uploads complete (with a delay)
-        setTimeout(() => {
-          const fileStatuses = document.querySelectorAll('.file-status');
-          let allCompleted = true;
-          fileStatuses.forEach(status => {
-            if (!status.textContent.includes('Success') && !status.textContent.includes('Error')) {
-              allCompleted = false;
-            }
-          });
-          
-          if (allCompleted && fileStatuses.length > 0) {
-            // Refresh the page after a short delay to show the new files
-            setTimeout(() => {
-              window.location.reload();
-            }, 2000);
-          }
-        }, 1000);
       }
     });
     
+    // Listen for upload completion event and reload the page to show new files
+    window.addEventListener('allUploadsComplete', (e) => {
+      // Wait 2 seconds to let users see the success message
+      setTimeout(() => {
+        window.location.reload();
+      }, 2000);
+    });
+    
     function closeUploadModal() {
       uploadModal.classList.remove('active');
     }