Feat/thumbnail

src/language/texts/en.ts

@@ -74,6 +74,7 @@ export function en() {
     'form_filler.file_uploader_delete_warning': 'Are you sure you want to delete this attachment?',
     'form_filler.file_uploader_delete_button_confirm': 'Yes, delete attachment',
     'form_filler.file_uploader_list_header_file_size': 'File size',
+    'form_filler.file_uploader_list_header_thumbnail': 'Thumbnail',
     'form_filler.file_uploader_list_header_name': 'Name',
     'form_filler.file_uploader_list_header_status': 'Status',
     'form_filler.file_uploader_list_header_delete_sr': 'Delete',

src/language/texts/nb.ts

@@ -75,6 +75,7 @@ export function nb() {
     'form_filler.file_uploader_delete_warning': 'Er du sikker på at du vil slette dette vedlegget?',
     'form_filler.file_uploader_delete_button_confirm': 'Ja, slett vedlegg',
     'form_filler.file_uploader_list_header_file_size': 'Filstørrelse',
+    'form_filler.file_uploader_list_header_thumbnail': 'Thumbnail',
     'form_filler.file_uploader_list_header_name': 'Navn',
     'form_filler.file_uploader_list_header_status': 'Status',
     'form_filler.file_uploader_list_status_done': 'Ferdig lastet',

src/language/texts/nn.ts

@@ -75,6 +75,7 @@ export function nn() {
     'form_filler.file_uploader_delete_warning': 'Er du sikker på at du vil sletta dette vedlegget?',
     'form_filler.file_uploader_delete_button_confirm': 'Ja, slett vedlegg',
     'form_filler.file_uploader_list_header_file_size': 'Filstorleik',
+    'form_filler.file_uploader_list_header_thumbnail': 'Thumbnail',
     'form_filler.file_uploader_list_header_name': 'Namn',
     'form_filler.file_uploader_list_header_status': 'Status',
     'form_filler.file_uploader_list_status_done': 'Ferdig lasta',

src/layout/FileUpload/FileUploadTable/AttachmentThumbnail.module.css

@@ -0,0 +1,20 @@
+.thumbnailContainer {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.thumbnail {
+  max-width: 100px;
+  max-height: 70px;
+  object-fit: contain;
+  border-radius: 2px;
+}
+
+.thumbnailMobile {
+  max-width: 80px;
+  max-height: 60px;
+  object-fit: contain;
+  border-radius: 2px;
+}

src/layout/FileUpload/FileUploadTable/AttachmentThumbnail.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { isAttachmentUploaded } from 'src/features/attachments';
+import { useInstanceDataElements, useLaxInstanceId } from 'src/features/instance/InstanceContext';
+import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
+import classes from 'src/layout/FileUpload/FileUploadTable/AttachmentThumbnail.module.css';
+import { getDataElementUrl } from 'src/utils/urls/appUrlHelper';
+import { makeUrlRelativeIfSameDomain } from 'src/utils/urls/urlHelper';
+import type { IAttachment, UploadedAttachment } from 'src/features/attachments';
+interface IAttachmentThumbnailProps {
+  attachment: IAttachment;
+  mobileView: boolean;
+}
+
+export const AttachmentThumbnail = ({ attachment, mobileView }: IAttachmentThumbnailProps) => {
+  // Get all data elements from the instance
+  const dataElements = useInstanceDataElements(undefined);
+  const instanceId = useLaxInstanceId();
+  const language = useCurrentLanguage();
+
+  // Only uploaded attachments can have thumbnails
+  if (!isAttachmentUploaded(attachment)) {
+    return null;
+  }
+
+  //Check for thumbnail metadata in the attachment
+  const thumbnailLink =
+    (attachment as UploadedAttachment)?.data?.metadata?.find(
+      (meta: { key: string; value: string }) => meta.key === 'thumbnailLink',
+    )?.value ?? null;
+
+  if (!thumbnailLink) {
+    return null;
+  }
+
+  // Find the thumbnail data element
+  const thumbnailDataElement = dataElements.find(
+    (el) =>
+      el.dataType === 'thumbnail' &&
+      el.metadata?.some((meta) => meta.key === 'attachmentLink' && meta.value === thumbnailLink),
+  );
+
+  if (!thumbnailDataElement?.id || !instanceId) {
+    return null;
+  }
+
+  const thumbnailUrl = makeUrlRelativeIfSameDomain(getDataElementUrl(instanceId, thumbnailDataElement.id, language));
+
+  if (!thumbnailUrl) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classes.thumbnailContainer}
+      data-testid='attachment-thumbnail'
+    >
+      <img
+        src={thumbnailUrl}
+        alt={`Thumbnail for ${attachment.data.filename}`}
+        className={mobileView ? classes.thumbnailMobile : classes.thumbnail}
+      />
+    </div>
+  );
+};