Feat/image-upload-component

src/app-components/Card/Card.module.css

@@ -1,6 +1,5 @@
 .mediaCard {
   padding: 0;
-  margin-bottom: -7px;
 }
 .mediaCard img {
   object-fit: cover;

src/app-components/Card/Card.tsx

@@ -13,6 +13,8 @@ type AppCardProps = {
   color?: Parameters<typeof Card>[0]['color'];
   children?: React.ReactNode;
   variant?: 'tinted' | 'default';
+  className?: string;
+  ref?: React.Ref<HTMLDivElement>;
 };
 
 export function AppCard({
@@ -24,11 +26,15 @@ export function AppCard({
   mediaPosition = 'top',
   children,
   variant = 'tinted',
+  className,
+  ref,
 }: AppCardProps) {
   return (
     <Card
       data-color={color}
       variant={variant}
+      className={className}
+      ref={ref}
     >
       {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
       <Card.Block>

src/app-components/Dropzone/Dropzone.tsx

@@ -6,22 +6,21 @@ import type { FileRejection } from 'react-dropzone';
 import cn from 'classnames';
 
 import classes from 'src/app-components/Dropzone/Dropzone.module.css';
-import { mapExtensionToAcceptMime } from 'src/app-components/Dropzone/mapExtensionToAcceptMime';
 
 type MaxFileSize = {
   sizeInMB: number;
   text: string;
 };
 
-export type IDropzoneComponentProps = {
+export type IDropzoneProps = {
   id: string;
   maxFileSize?: MaxFileSize;
   readOnly: boolean;
-  onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   onDrop: (acceptedFiles: File[], rejectedFiles: FileRejection[]) => void;
+  onDragActiveChange?: (isDragActive: boolean) => void;
   hasValidationMessages: boolean;
-  hasCustomFileEndings?: boolean;
-  validFileEndings?: string | string[];
+  acceptedFiles?: { [key: string]: string[] };
   labelId?: string;
   describedBy?: string;
   className?: string;
@@ -35,15 +34,15 @@ export function Dropzone({
   readOnly,
   onClick,
   onDrop,
+  onDragActiveChange,
   hasValidationMessages,
-  hasCustomFileEndings,
-  validFileEndings,
+  acceptedFiles,
   labelId,
   children,
   className,
   describedBy,
   ...rest
-}: IDropzoneComponentProps): React.JSX.Element {
+}: IDropzoneProps): React.JSX.Element {
   const maxSizeLabelId = `file-upload-max-size-${id}`;
   const describedby =
     [describedBy, maxFileSize?.sizeInMB ? maxSizeLabelId : undefined].filter(Boolean).join(' ') || undefined;
@@ -52,9 +51,16 @@ export function Dropzone({
     onDrop,
     maxSize: maxFileSize && maxFileSize.sizeInMB * bytesInOneMB,
     disabled: readOnly,
-    accept:
-      hasCustomFileEndings && validFileEndings !== undefined ? mapExtensionToAcceptMime(validFileEndings) : undefined,
+    accept: acceptedFiles,
   });
+
+  // set drag active state in parent component if callback is provided
+  React.useEffect(() => {
+    if (onDragActiveChange) {
+      onDragActiveChange(isDragActive);
+    }
+  }, [isDragActive, onDragActiveChange]);
+
   return (
     <div>
       {maxFileSize && (

src/features/expressions/shared-tests/functions/displayValue/type-ImageUpload.json

@@ -0,0 +1,42 @@
+{
+  "name": "Display value of FileUpload component",
+  "expression": [
+    "displayValue",
+    "image"
+  ],
+  "context": {
+    "component": "image",
+    "currentLayout": "Page"
+  },
+  "expects": "my-image.jpg",
+  "layouts": {
+    "Page": {
+      "$schema": "https://altinncdn.no/schemas/json/layout/layout.schema.v1.json",
+      "data": {
+        "layout": [
+          {
+            "id": "image",
+            "type": "ImageUpload"
+          }
+        ]
+      }
+    }
+  },
+  "instanceDataElements": [
+    {
+        "id": "bb2b2222-2b22-2b22-222b-222222222222",
+        "instanceGuid": "aa1a1111-1a11-1a11-111a-111111111111",
+        "dataType": "image",
+        "filename": "my-image.jpg",
+        "contentType": "image/jpeg",
+        "blobStoragePath": "",
+        "size": 100,
+        "locked": false,
+        "refs": [],
+        "created": "2021-01-01T00:00:00.000Z",
+        "createdBy": "testUser",
+        "lastChanged": "2021-01-01T00:00:00.000Z",
+        "lastChangedBy": "testUser"
+    }
+  ]
+}

src/language/texts/en.ts

@@ -208,6 +208,17 @@ export function en() {
     'iframe_component.unsupported_browser_title': 'Your browser is unsupported',
     'iframe_component.unsupported_browser':
       'Your browser does not support iframes that use srcdoc. This may result in not being able to see all the content intended to be displayed here. We recommend trying a different browser.',
+    'image_upload_component.animated_warning': 'If the image is animated, only the first frame will be shown.',
+    'image_upload_component.button_change': 'Change image',
+    'image_upload_component.button_delete': 'Delete image',
+    'image_upload_component.button_save': 'Save image',
+    'image_upload_component.crop_area': 'Crop area',
+    'image_upload_component.slider_zoom': 'Zoom',
+    'image_upload_component.summary_empty': "You haven't uploaded an image",
+    'image_upload_component.reset': 'Reset position and zoom',
+    'image_upload_component.error_invalid_file_type': 'Invalid file format. Please upload an image file.',
+    'image_upload_component.error_file_size_exceeded': 'File size exceeds 10MB limit.',
+    'image_upload_component.valid_file_types': 'Image files only',
     'input_components.remaining_characters': 'You have %d characters left',
     'input_components.exceeded_max_limit': 'You have exceeded the maximum limit with %d characters',
     'instance_selection.changed_by': 'Changed by',

src/language/texts/nb.ts

@@ -70,7 +70,7 @@ export function nb() {
     'form_filler.file_upload_valid_file_format_all': 'alle',
     'form_filler.file_uploader_add_attachment': 'Legg til flere vedlegg',
     'form_filler.file_uploader_drag': 'Dra og slipp eller',
-    'form_filler.file_uploader_find': 'let etter fil',
+    'form_filler.file_uploader_find': 'finn fil',
     'form_filler.file_uploader_list_delete': 'Slett vedlegg',
     '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',
@@ -209,6 +209,17 @@ export function nb() {
     'iframe_component.unsupported_browser_title': 'Nettleseren din støttes ikke',
     'iframe_component.unsupported_browser':
       'Nettleseren du bruker støtter ikke iframes som benytter seg av srcdoc. Dette kan føre til at du ikke ser all innholdet som er ment å vises her. Vi anbefaler deg å prøve en annen nettleser.',
+    'image_upload_component.animated_warning': 'Hvis bildet er animert, vises bare det første bildet.',
+    'image_upload_component.button_change': 'Bytt bilde',
+    'image_upload_component.button_delete': 'Slett bildet',
+    'image_upload_component.button_save': 'Lagre bilde',
+    'image_upload_component.crop_area': 'Beskjæringsområde',
+    'image_upload_component.slider_zoom': 'Tilpass bildet',
+    'image_upload_component.summary_empty': 'Du har ikke lastet opp noe bilde',
+    'image_upload_component.reset': 'Tilbakestill zoom og plassering',
+    'image_upload_component.error_invalid_file_type': 'Ugyldig filformat. Last opp en bildefil.',
+    'image_upload_component.error_file_size_exceeded': 'Filen er for stor. Største tillatte filstørrelse er 10MB.',
+    'image_upload_component.valid_file_types': 'Bildefiler er tillatt',
     'input_components.remaining_characters': 'Du har %d tegn igjen',
     'input_components.exceeded_max_limit': 'Du har overskredet maks antall tegn med %d',
     'instance_selection.changed_by': 'Endret av',

src/language/texts/nn.ts

@@ -70,7 +70,7 @@ export function nn() {
     'form_filler.file_upload_valid_file_format_all': 'alle',
     'form_filler.file_uploader_add_attachment': 'Legg til fleire vedlegg',
     'form_filler.file_uploader_drag': 'Dra og slepp eller',
-    'form_filler.file_uploader_find': 'leit etter fil',
+    'form_filler.file_uploader_find': 'finn fil',
     'form_filler.file_uploader_list_delete': 'Slett vedlegg',
     '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',
@@ -209,6 +209,17 @@ export function nn() {
     'iframe_component.unsupported_browser_title': 'Nettlesaren din støttas ikkje',
     'iframe_component.unsupported_browser':
       'Nettlesaren di støttar ikkje iframes som brukar srcdoc. Dette kan føre til at du ikkje ser all innhaldet som er meint å visast her. Vi anbefalar deg å prøve ein annan nettlesar.',
+    'image_upload_component.animated_warning': 'Hvis bildet er animert, vises bare det første bildet.',
+    'image_upload_component.button_change': 'Bytt bilde',
+    'image_upload_component.button_delete': 'Slett bildet',
+    'image_upload_component.button_save': 'Lagre bilde',
+    'image_upload_component.slider_zoom': 'Tilpass bildet',
+    'image_upload_component.crop_area': 'Beskjæringsområde',
+    'image_upload_component.summary_empty': 'Du har ikkje lasta opp noko bilde',
+    'image_upload_component.reset': 'Tilbakestill zoom og plassering',
+    'image_upload_component.error_invalid_file_type': 'Ugyldig filformat. Last opp ein bildefil.',
+    'image_upload_component.error_file_size_exceeded': 'Fila er for stor. Største tillatte filstorleik er 10MB.',
+    'image_upload_component.valid_file_types': 'Bildefiler er tillatne',
     'input_components.remaining_characters': 'Du har %d teikn igjen',
     'input_components.exceeded_max_limit': 'Du har overskride maks teikn med %d',
     'instance_selection.changed_by': 'Endra av',

src/layout/Cards/Cards.module.css

@@ -11,3 +11,7 @@ video {
 .cardMedia:last-of-type {
   margin-top: auto;
 }
+
+.mediaCard {
+  margin-bottom: -7px;
+}

src/layout/Cards/Cards.tsx

@@ -5,6 +5,7 @@ import { AppCard } from 'src/app-components/Card/Card';
 import { Flex } from 'src/app-components/Flex/Flex';
 import { Lang } from 'src/features/language/Lang';
 import { CardProvider } from 'src/layout/Cards/CardContext';
+import classes from 'src/layout/Cards/Cards.module.css';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponent } from 'src/layout/GenericComponent';
 import { useHasCapability } from 'src/utils/layout/canRenderIn';
@@ -117,6 +118,7 @@ function CardItem({ baseComponentId, parentBaseId, isMedia, minMediaHeight }: Ca
         <div
           data-componentid={id}
           data-componentbaseid={baseComponentId}
+          className={classes.mediaCard}
         >
           <GenericComponent
             baseComponentId={baseComponentId}

src/layout/FileUpload/FileUploadComponent.test.tsx

@@ -473,7 +473,7 @@ describe('File uploading components', () => {
         });
 
         expect(screen.getByRole('presentation', { name: /attachment-title/i }).textContent).toMatch(
-          'Dra og slipp eller let etter filTillatte filformater er: alle',
+          'Dra og slipp eller finn filTillatte filformater er: alle',
         );
       });
 

src/layout/FileUpload/FileUploadComponent.tsx

@@ -7,6 +7,7 @@ import { CloudUpIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
 
 import { Dropzone } from 'src/app-components/Dropzone/Dropzone';
+import { mapExtensionToAcceptMime } from 'src/app-components/Dropzone/mapExtensionToAcceptMime';
 import { getDescriptionId, getLabelId, Label } from 'src/components/label/Label';
 import { useAddRejectedAttachments, useAttachmentsFor, useAttachmentsUploader } from 'src/features/attachments/hooks';
 import { Lang } from 'src/features/language/Lang';
@@ -59,7 +60,8 @@ export function FileUploadComponent({
   const validations = useUnifiedValidationsForNode(baseComponentId).filter(
     (v) => !('attachmentId' in v) || !v.attachmentId,
   );
-
+  const filesToAccept =
+    hasCustomFileEndings && validFileEndings !== undefined ? mapExtensionToAcceptMime(validFileEndings) : undefined;
   const { options, isFetching } = useGetOptions(baseComponentId, 'single');
   const indexedId = useIndexedId(baseComponentId);
 
@@ -139,8 +141,7 @@ export function FileUploadComponent({
               onClick={(e) => e.preventDefault()}
               onDrop={handleDrop}
               hasValidationMessages={hasValidationErrors(validations)}
-              hasCustomFileEndings={hasCustomFileEndings}
-              validFileEndings={validFileEndings}
+              acceptedFiles={filesToAccept}
               labelId={textResourceBindings?.title ? getLabelId(id) : undefined}
               describedBy={ariaDescribedBy}
             >

src/layout/FileUpload/FileUploadTable/FileTable.tsx

@@ -30,9 +30,9 @@ export function FileTable({
   isSummary,
   isFetching,
 }: FileTableProps): React.JSX.Element | null {
-  const { textResourceBindings, type, readOnly } = useItemWhenType<'FileUpload' | 'FileUploadWithTag'>(
+  const { textResourceBindings, type, readOnly } = useItemWhenType<'FileUpload' | 'FileUploadWithTag' | 'ImageUpload'>(
     baseComponentId,
-    (t) => t === 'FileUpload' || t === 'FileUploadWithTag',
+    (t) => t === 'FileUpload' || t === 'FileUploadWithTag' || t === 'ImageUpload',
   );
   const hasTag = type === 'FileUploadWithTag';
   const pdfModeActive = usePdfModeActive();

src/layout/FileUpload/utils/useFileUploaderDataBindingsValidation.ts

@@ -7,7 +7,7 @@ import {
 } from 'src/utils/layout/generator/validation/hooks';
 import type { IDataModelBindings } from 'src/layout/layout';
 
-export function useFileUploaderDataBindingsValidation<T extends 'FileUpload' | 'FileUploadWithTag'>(
+export function useFileUploaderDataBindingsValidation<T extends 'FileUpload' | 'FileUploadWithTag' | 'ImageUpload'>(
   baseComponentId: string,
   bindings: IDataModelBindings<T>,
 ): string[] {

src/layout/ImageUpload/ImageCanvas/ImageCanvas.module.css

@@ -0,0 +1,12 @@
+.canvas {
+  display: block;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: grab;
+  touch-action: none;
+}
+
+.canvas:active {
+  cursor: grabbing;
+}

src/layout/ImageUpload/ImageCanvas/ImageCanvas.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { useLanguage } from 'src/features/language/useLanguage';
+import { useCanvasDraw } from 'src/layout/ImageUpload/ImageCanvas/hooks/useCanvasDraw';
+import { useDragInteraction } from 'src/layout/ImageUpload/ImageCanvas/hooks/useDragInteraction';
+import { useKeyboardNavigation } from 'src/layout/ImageUpload/ImageCanvas/hooks/useKeyboardNavigation';
+import { useZoomInteraction } from 'src/layout/ImageUpload/ImageCanvas/hooks/useZoomInteraction';
+import classes from 'src/layout/ImageUpload/ImageCanvas/ImageCanvas.module.css';
+import { ImagePreview } from 'src/layout/ImageUpload/ImageCanvas/ImagePreview';
+import { useImageFile } from 'src/layout/ImageUpload/useImageFile';
+import type { CropArea, Position } from 'src/layout/ImageUpload/imageUploadUtils';
+interface ImageCanvasProps {
+  imageRef: React.RefObject<HTMLImageElement | null>;
+  zoom: number;
+  position: Position;
+  cropArea: CropArea;
+  baseComponentId: string;
+  onPositionChange: (newPosition: Position) => void;
+  onZoomChange: (newZoom: number) => void;
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
+}
+
+const CANVAS_HEIGHT = 320;
+const CANVAS_WIDTH = 1000;
+
+export function ImageCanvas({
+  imageRef,
+  zoom,
+  position,
+  cropArea,
+  baseComponentId,
+  onPositionChange,
+  onZoomChange,
+  canvasRef,
+}: ImageCanvasProps) {
+  const { storedImage, imageUrl } = useImageFile(baseComponentId);
+  const { langAsString } = useLanguage();
+
+  useCanvasDraw({ canvasRef, imageRef, zoom, position, cropArea });
+  useZoomInteraction({ canvasRef, zoom, onZoomChange });
+  const { handlePointerDown } = useDragInteraction({ canvasRef, position, onPositionChange });
+  const { handleKeyDown } = useKeyboardNavigation({ position, onPositionChange });
+
+  if (storedImage) {
+    return (
+      <ImagePreview
+        storedImage={storedImage}
+        imageUrl={imageUrl}
+      />
+    );
+  }
+
+  return (
+    <canvas
+      onPointerDown={handlePointerDown}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      ref={canvasRef}
+      height={CANVAS_HEIGHT}
+      width={CANVAS_WIDTH}
+      className={classes.canvas}
+      aria-label={langAsString('image_upload_component.crop_area')}
+    />
+  );
+}

src/layout/ImageUpload/ImageCanvas/ImagePreview.module.css

@@ -0,0 +1,9 @@
+.previewWrapper {
+  background-color: #f4f5f6; /* Following does not exist in v1: var(--ds-color-neutral-background-subtle); */
+  height: 320px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--ds-size-4);
+  box-sizing: border-box;
+}