From 97372722c2905a7140c9fbcae2978971de174931 Mon Sep 17 00:00:00 2001
From: Sverre Nystad <sverrenystad@gmail.com>
Date: Wed, 30 Oct 2024 13:27:48 +0100
Subject: [PATCH] feat: make files previewable

---
 webapp/src/components/FilePreview.tsx | 39 ++++++++++++++-------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/webapp/src/components/FilePreview.tsx b/webapp/src/components/FilePreview.tsx
index 206ad1c..4ccbea0 100644
--- a/webapp/src/components/FilePreview.tsx
+++ b/webapp/src/components/FilePreview.tsx
@@ -1,22 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 interface FilePreviewProps {
   files: File[];
 }
 
-const FilePreview: React.FC<FilePreviewProps> = ({ files}) => {
-  const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
+const FilePreview: React.FC<FilePreviewProps> = ({ files }) => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
-  /**
-   * Sets the selected file for preview.
-   * @param fileName - The name of the file to select.
-   */
   const handleSelectFile = (fileName: string) => {
     const file = files.find(file => file.name === fileName) ?? null;
     setSelectedFile(file);
   };
 
-
   return (
     <div className="mb-6 bg-white p-4 rounded-lg shadow-md h-full">
       <div className="flex flex-col sm:flex-row items-start">
@@ -37,16 +32,24 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files}) => {
       </div>
 
       {selectedFile && (
-        <div
-          className="border p-4 rounded-lg mt-2 bg-gray-50"
-          role="region"
-          aria-labelledby="file-preview-heading"
-        >
-          <h3 id="file-preview-heading" className="font-semibold mb-2">
-            Preview of: {selectedFile.name}
-          </h3>
-          {/* Placeholder for file preview */}
-          <p>File content would be shown here (mock).</p>
+        <div className="border p-4 rounded-lg mt-2 bg-gray-50">
+          <h3 className="font-semibold mb-2">Preview of: {selectedFile.name}</h3>
+          {selectedFile.type === 'application/pdf' ? (
+            <iframe
+              src={URL.createObjectURL(selectedFile)}
+              title="PDF Preview"
+              className="w-full h-96"
+              frameBorder="0"
+            ></iframe>
+          ) : selectedFile.type.startsWith('image/') ? (
+            <img
+              src={URL.createObjectURL(selectedFile)}
+              alt={selectedFile.name}
+              className="max-w-full h-auto rounded-lg"
+            />
+          ) : (
+            <p>File type not supported for preview. Please select a PDF or image file.</p>
+          )}
         </div>
       )}
     </div>