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': 'Preview',
     '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': 'Forhåndsvisning',
     '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': 'Førehandsvisning',
     '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,132 @@
+.thumbnailContainer {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.thumbnail {
+  max-width: 80px;
+  max-height: 56px;
+  object-fit: contain;
+}
+
+.thumbnailMobile {
+  max-width: 64px;
+  max-height: 48px;
+  object-fit: contain;
+}
+
+.previewBackdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.previewModal {
+  position: relative;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.previewHeader {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background-color: #fff;
+  border-radius: 8px 8px 0 0;
+  gap: 16px;
+}
+
+.previewHeaderMobile {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px;
+  background-color: #fff;
+  border-radius: 8px 8px 0 0;
+  gap: 8px;
+}
+
+.fileName {
+  font-weight: 500;
+  color: #333;
+  flex: 1;
+  word-break: break-word;
+  font-size: 0.95rem;
+}
+
+.previewImage {
+  max-width: 100%;
+  max-height: calc(90vh - 100px);
+  object-fit: contain;
+  display: block;
+  padding: 0 20px 20px 20px;
+  background-color: #fff;
+}
+
+.previewImageMobile {
+  max-width: 100%;
+  max-height: calc(90vh - 100px);
+  object-fit: contain;
+  display: block;
+  padding: 0 10px 10px 10px;
+  background-color: #fff;
+}
+
+.closeButton {
+  position: relative;
+  background-color: transparent;
+  border: none;
+  font-size: 32px;
+  cursor: pointer;
+  color: var(--ds-color-text-subtle);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.closeButton:hover {
+  color: var(--ds-color-text-default);
+  background-color: var(--ds-color-surface-tinted);
+}
+
+.imageLoading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/layout/FileUpload/FileUploadTable/AttachmentThumbnail.tsx

@@ -0,0 +1,59 @@
+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 } from 'src/features/attachments';
+
+interface IAttachmentThumbnailProps {
+  attachment: IAttachment;
+  mobileView: boolean;
+  onThumbnailClick?: () => void;
+}
+
+export const AttachmentThumbnail = ({ attachment, mobileView, onThumbnailClick }: IAttachmentThumbnailProps) => {
+  const dataElements = useInstanceDataElements(undefined);
+  const instanceId = useLaxInstanceId();
+  const language = useCurrentLanguage();
+
+  // Only uploaded attachments can have thumbnails
+  if (!instanceId || !isAttachmentUploaded(attachment)) {
+    return '';
+  }
+
+  const thumbnailLink = attachment.data.metadata?.find((meta) => meta.key === 'thumbnailLink')?.value;
+  if (!thumbnailLink) {
+    return '';
+  }
+
+  const thumbnailDataElement = dataElements.find(
+    (el) =>
+      el.dataType === 'thumbnail' &&
+      el.metadata?.some((meta) => meta.key === 'attachmentLink' && meta.value === thumbnailLink),
+  );
+
+  const url = thumbnailDataElement
+    ? makeUrlRelativeIfSameDomain(getDataElementUrl(instanceId, thumbnailDataElement.id, language))
+    : undefined;
+
+  return (
+    <div
+      className={classes.thumbnailContainer}
+      data-testid='attachment-thumbnail'
+      onClick={onThumbnailClick}
+      style={onThumbnailClick ? { cursor: 'pointer' } : {}}
+      role={onThumbnailClick ? 'button' : undefined}
+      tabIndex={onThumbnailClick ? 0 : undefined}
+      onKeyDown={onThumbnailClick ? (e) => e.key === 'Enter' && onThumbnailClick() : undefined}
+    >
+      <img
+        src={url}
+        alt={`Thumbnail for ${attachment.data.filename}`}
+        className={mobileView ? classes.thumbnailMobile : classes.thumbnail}
+      />
+    </div>
+  );
+};