diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx
index e77ff37b67d..f63547fec65 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx
@@ -1,6 +1,7 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
 import { Form, Value, Field } from '@dnb/eufemia/src/extensions/forms'
 import { Flex, Span } from '@dnb/eufemia/src'
+import { createRequest } from '../../Form/SubmitIndicator/Examples'
 import { createMockFile } from '../../../../../../docs/uilib/components/upload/Examples'
 
 export const Placeholder = () => {
@@ -152,8 +153,41 @@ export const Label = () => {
 
 export const LabelAndValue = () => {
   return (
-    <ComponentBox hideCode scope={{ createMockFile }}>
+    <ComponentBox
+      hideCode
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-label-and-value"
+    >
+      <Value.Upload
+        label="Label text"
+        value={[
+          {
+            file: createMockFile('fileName-1.png', 1000000, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+          {
+            file: createMockFile('fileName-2.png', 2000000, 'image/png'),
+            exists: false,
+            id: '2',
+          },
+        ]}
+      />
+    </ComponentBox>
+  )
+}
+
+export const LabelAndValueOnFileClick = () => {
+  return (
+    <ComponentBox
+      hideCode
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-label-and-value-on-file-click"
+    >
       <Value.Upload
+        onFileClick={() => {
+          console.log('Clicked on file')
+        }}
         label="Label text"
         value={[
           {
@@ -164,6 +198,7 @@ export const LabelAndValue = () => {
           {
             file: createMockFile('fileName-2.png', 2000000, 'image/png'),
             exists: false,
+            isLoading: true,
             id: '2',
           },
         ]}
@@ -255,6 +290,68 @@ export const ListVariants = () => {
   )
 }
 
+export const ListVariantsOnFileClick = () => {
+  return (
+    <ComponentBox
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-lists-on-file-click"
+      hideCode
+    >
+      <Value.Upload
+        onFileClick={() => {
+          console.log('Clicked on file')
+        }}
+        value={[
+          {
+            file: createMockFile('fileName-1.png', 1000000, 'image/png'),
+            exists: false,
+            isLoading: true,
+            id: '1',
+          },
+          {
+            file: createMockFile('fileName-2.png', 2000000, 'image/png'),
+            exists: false,
+            id: '2',
+          },
+          {
+            file: createMockFile('fileName-3.png', 3000000, 'image/png'),
+            exists: false,
+            id: '3',
+          },
+        ]}
+        label="Ordered List"
+        variant="ol"
+      />
+      <Value.Upload
+        onFileClick={() => {
+          console.log('Clicked on file')
+        }}
+        value={[
+          {
+            file: createMockFile('fileName-1.png', 1000000, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+          {
+            file: createMockFile('fileName-2.png', 2000000, 'image/png'),
+            exists: false,
+            id: '2',
+            isLoading: true,
+          },
+          {
+            file: createMockFile('fileName-3.png', 3000000, 'image/png'),
+            exists: false,
+            id: '3',
+            isLoading: true,
+          },
+        ]}
+        label="Unordered List"
+        variant="ul"
+      />
+    </ComponentBox>
+  )
+}
+
 export const ListTypes = () => {
   return (
     <ComponentBox scope={{ createMockFile }} hideCode>
@@ -396,28 +493,53 @@ export const ListTypes = () => {
 
 export const OnFileClick = () => {
   return (
-    <ComponentBox hideCode scope={{ createMockFile }}>
-      <Value.Upload
-        label="Label text"
-        value={[
-          {
-            file: createMockFile('35217511.jpg', 1000000, 'image/png'),
-            exists: false,
-            id: '1',
-          },
-          {
-            file: createMockFile('1501870.jpg', 2000000, 'image/png'),
-            exists: false,
-            id: '2',
-          },
-        ]}
-        onFileClick={({ fileItem }) => {
-          window.open(
-            'https://eufemia.dnb.no/images/avatars/' + fileItem.file.name,
-            '_blank',
+    <ComponentBox scope={{ createMockFile, createRequest }}>
+      {() => {
+        function Component() {
+          async function mockAsyncFileFetching({ fileItem }) {
+            const request = createRequest()
+            console.log(
+              'making API request to fetch the url of the file: ' +
+                fileItem.file.name,
+            )
+            await request(2000) // Simulate a request
+            window.open(
+              'https://eufemia.dnb.no/images/avatars/' +
+                fileItem.file.name,
+              '_blank',
+            )
+          }
+
+          return (
+            <Value.Upload
+              label="Label text"
+              value={[
+                {
+                  file: createMockFile(
+                    '35217511.jpg',
+                    1000000,
+                    'image/png',
+                  ),
+                  exists: false,
+                  id: '1',
+                },
+                {
+                  file: createMockFile(
+                    '1501870.jpg',
+                    2000000,
+                    'image/png',
+                  ),
+                  exists: false,
+                  id: '2',
+                },
+              ]}
+              onFileClick={mockAsyncFileFetching}
+            />
           )
-        }}
-      />
+        }
+
+        return <Component />
+      }}
     </ComponentBox>
   )
 }
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx
index 0ea47024a75..023e79d3970 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx
@@ -53,3 +53,8 @@ import * as Examples from './Examples'
 ### Using `onFileClick`
 
 <Examples.OnFileClick />
+
+<VisibleWhenVisualTest>
+  <Examples.LabelAndValueOnFileClick />
+  <Examples.ListVariantsOnFileClick />
+</VisibleWhenVisualTest>
diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
index 78cd45065d1..a44c42d7cb5 100644
--- a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
+++ b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
@@ -29,6 +29,7 @@ import { getPreviousSibling } from '../../shared/component-helper'
 import useUpload from './useUpload'
 import { getFileTypeFromExtension } from './UploadVerify'
 import UploadFileLink from './UploadFileListLink'
+import { ProgressIndicatorAllProps } from '../progress-indicator/types'
 
 // Will be deprecated - and then default to only showing the file icon,
 // and not file icon per file extension type
@@ -90,8 +91,6 @@ const UploadFileListCell = ({
   const { file, errorMessage, isLoading } = uploadFile
   const hasWarning = errorMessage != null
 
-  const fileType = getFileTypeFromExtension(file)
-
   const imageUrl = URL.createObjectURL(file)
   const cellRef = useRef<HTMLLIElement>()
   const exists = useExistsHighlight(id, file)
@@ -122,7 +121,7 @@ const UploadFileListCell = ({
     >
       <div className="dnb-upload__file-cell__content">
         <div className="dnb-upload__file-cell__content__left">
-          {getIcon()}
+          {getFileIcon(file, { isLoading }, hasWarning)}
           {getTitle()}
         </div>
         <div>
@@ -142,34 +141,6 @@ const UploadFileListCell = ({
     </li>
   )
 
-  function getIcon() {
-    if (isLoading) {
-      return <ProgressIndicator />
-    }
-
-    if (hasWarning) return <Icon icon={ExclamationIcon} />
-
-    let iconFileType = fileType
-
-    if (!iconFileType) {
-      const mimeParts = file.type.split('/')
-      iconFileType =
-        fileExtensionImages[mimeParts[0]] ||
-        fileExtensionImages[mimeParts[1]]
-    }
-
-    if (
-      !Object.prototype.hasOwnProperty.call(
-        fileExtensionImages,
-        iconFileType
-      )
-    ) {
-      iconFileType = 'file'
-    }
-
-    return <Icon icon={fileExtensionImages[iconFileType]} />
-  }
-
   function getTitle() {
     return isLoading ? (
       <div
@@ -226,3 +197,42 @@ function useExistsHighlight(id: string, file: File) {
 
   return exists
 }
+
+export function getFileIcon(
+  file: File,
+  loading?: {
+    isLoading: UploadFile['isLoading']
+    size?: ProgressIndicatorAllProps['size']
+  },
+  hasWarning?: boolean
+) {
+  if (loading?.isLoading) {
+    return <ProgressIndicator size={loading?.size ?? 'default'} />
+  }
+
+  if (hasWarning) return <Icon icon={ExclamationIcon} />
+
+  if (!file) {
+    return
+  }
+
+  let iconFileType = getFileTypeFromExtension(file)
+
+  if (!iconFileType) {
+    const mimeParts = file.type.split('/')
+    iconFileType =
+      fileExtensionImages[mimeParts[0]] ||
+      fileExtensionImages[mimeParts[1]]
+  }
+
+  if (
+    !Object.prototype.hasOwnProperty.call(
+      fileExtensionImages,
+      iconFileType
+    )
+  ) {
+    iconFileType = 'file'
+  }
+
+  return <Icon icon={fileExtensionImages[iconFileType]} />
+}
diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListLink.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListLink.tsx
index 9a96178d4ca..015ed24284a 100644
--- a/packages/dnb-eufemia/src/components/upload/UploadFileListLink.tsx
+++ b/packages/dnb-eufemia/src/components/upload/UploadFileListLink.tsx
@@ -36,6 +36,7 @@ const UploadFileButton = (props: UploadFileButtonProps) => {
   const spacingClasses = createSpacingClasses(props)
   return (
     <Button
+      size="small"
       icon={false}
       variant="tertiary"
       onClick={onClick}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx
index ff0cb78f6a7..2ba47b1aabb 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx
@@ -1,21 +1,18 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { useValueProps } from '../../hooks'
 import { ValueProps } from '../../types'
 import ValueBlock from '../../ValueBlock'
-import Icon from '../../../../components/Icon'
 import ListFormat, {
   ListFormatProps,
 } from '../../../../components/list-format'
 import type { UploadFile } from '../../../../components/upload/types'
-import { fileExtensionImages } from '../../../../components/upload/UploadFileListCell'
-import {
-  BYTES_IN_A_MEGA_BYTE,
-  getFileTypeFromExtension,
-} from '../../../../components/upload/UploadVerify'
+import { getFileIcon } from '../../../../components/upload/UploadFileListCell'
+import { BYTES_IN_A_MEGA_BYTE } from '../../../../components/upload/UploadVerify'
 import { Props as FieldUploadProps } from '../../Field/Upload/Upload'
 import { format } from '../../../../components/number-format/NumberUtils'
 import { UploadFileLink } from '../../../../components/upload/UploadFileListLink'
+import { isAsync } from '../../../../shared/helpers/isAsync'
 
 export type Props = ValueProps<Array<UploadFile>> &
   Omit<ListFormatProps, 'value'> &
@@ -44,29 +41,14 @@ function Upload(props: Props) {
         if (!file) {
           return
         }
-        const onFileClickHandler = () => {
-          if (typeof onFileClick === 'function') {
-            onFileClick({ fileItem: uploadFile })
-          }
-        }
-
-        const imageUrl = URL.createObjectURL(file)
-
-        const text =
-          file.name + (displaySize ? ' ' + getSize(file.size) : '')
-
         return (
-          <span key={index}>
-            {getIcon(file)}
-
-            <UploadFileLink
-              left="x-small"
-              text={text}
-              href={imageUrl}
-              download={download}
-              onClick={onFileClick && onFileClickHandler}
-            />
-          </span>
+          <UploadFileItem
+            key={index}
+            uploadFile={uploadFile}
+            download={download}
+            displaySize={displaySize}
+            onFileClick={onFileClick}
+          />
         )
       }) || undefined
 
@@ -103,32 +85,56 @@ function getSize(size: number) {
   })} MB)`
 }
 
-function getIcon(file: File) {
-  if (!file) {
-    return
-  }
-  const fileType = getFileTypeFromExtension(file)
+Upload._supportsSpacingProps = true
+export default Upload
+
+function UploadFileItem(
+  props: { uploadFile: UploadFile } & Pick<
+    Props,
+    'download' | 'onFileClick' | 'displaySize'
+  >
+) {
+  const {
+    uploadFile,
+    download = false,
+    displaySize = false,
+    onFileClick,
+  } = props
 
-  let iconFileType = fileType
+  const [loading, setLoading] = useState(false)
 
-  if (!iconFileType) {
-    const mimeParts = file.type.split('/')
-    iconFileType =
-      fileExtensionImages[mimeParts[0]] ||
-      fileExtensionImages[mimeParts[1]]
+  const { file, isLoading: fileIsLoading } = uploadFile || {}
+
+  const handleFileClickAsync = async (uploadFile: UploadFile) => {
+    setLoading(true)
+    await onFileClick({ fileItem: uploadFile })
+    setLoading(false)
   }
 
-  if (
-    !Object.prototype.hasOwnProperty.call(
-      fileExtensionImages,
-      iconFileType
-    )
-  ) {
-    iconFileType = 'file'
+  const onFileClickHandler = async () => {
+    if (typeof onFileClick === 'function') {
+      if (isAsync(onFileClick)) {
+        handleFileClickAsync(uploadFile)
+      } else {
+        onFileClick({ fileItem: uploadFile })
+      }
+    }
   }
 
-  return <Icon icon={fileExtensionImages[iconFileType]} />
-}
+  const imageUrl = URL.createObjectURL(file)
 
-Upload._supportsSpacingProps = true
-export default Upload
+  const text = file.name + (displaySize ? ' ' + getSize(file.size) : '')
+  const isLoading = fileIsLoading || loading
+  return (
+    <span className="dnb-forms-value-upload__item">
+      {getFileIcon(file, { isLoading, size: 'medium' }, false)}
+      <UploadFileLink
+        left="x-small"
+        text={text}
+        href={imageUrl}
+        download={download}
+        onClick={onFileClick && onFileClickHandler}
+      />
+    </span>
+  )
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts
index 410e3b7a300..62a07ad84c5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts
@@ -22,17 +22,39 @@ describe('Value.Upload', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to list upload inline', async () => {
+  it('have to match list upload inline', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="upload-value-inline"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to list upload value', async () => {
+  it('have to match label and value', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="upload-value-label-and-value"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match label and value with on file click', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="upload-value-label-and-value-on-file-click"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match list', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="upload-value-lists"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match list with on file click', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="upload-value-lists-on-file-click"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx
index 3840bf114d2..00979aa7b22 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
-import { screen, render, fireEvent } from '@testing-library/react'
+import { screen, render, fireEvent, waitFor } from '@testing-library/react'
 import { Value, Form } from '../../..'
 import { createMockFile } from '../../../../../components/upload/__tests__/testHelpers'
+import { wait } from '../../../../../core/jest/jestSetup'
 
 global.URL.createObjectURL = jest.fn(() => 'url')
 
@@ -363,6 +364,53 @@ describe('Value.Upload', () => {
       expect(onFileClick).toHaveBeenCalledTimes(1)
     })
 
+    it('should display spinner when async onFileClick event', async () => {
+      const onFileClick = jest.fn(async () => {
+        await wait(1)
+      })
+
+      render(
+        <Value.Upload
+          onFileClick={onFileClick}
+          value={[
+            {
+              file: createMockFile('fileName', 100, 'image/png'),
+              exists: false,
+              id: '1',
+            },
+          ]}
+        />
+      )
+
+      const buttonElement = document.querySelector('.dnb-button')
+
+      await waitFor(() => {
+        fireEvent.click(buttonElement)
+        expect(
+          document.querySelector('.dnb-progress-indicator')
+        ).toBeInTheDocument()
+      })
+    })
+
+    it('should display spinner when file is loading', async () => {
+      render(
+        <Value.Upload
+          value={[
+            {
+              file: createMockFile('fileName', 100, 'image/png'),
+              exists: false,
+              id: '1',
+              isLoading: true,
+            },
+          ]}
+        />
+      )
+
+      expect(
+        document.querySelector('.dnb-progress-indicator')
+      ).toBeInTheDocument()
+    })
+
     it('renders the anchor href', () => {
       const fileName = 'file.png'
       const mockUrl = 'mock-url'
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-label-and-value-with-on-file-click.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-label-and-value-with-on-file-click.snap.png
new file mode 100644
index 00000000000..b923af14503
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-label-and-value-with-on-file-click.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-label-and-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-label-and-value.snap.png
new file mode 100644
index 00000000000..e44bbe49183
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-label-and-value.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-inline.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-list-upload-inline.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-inline.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-list-upload-inline.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-list-with-on-file-click.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-list-with-on-file-click.snap.png
new file mode 100644
index 00000000000..53e3428ac04
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-list-with-on-file-click.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-list.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-list-upload-value.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/__image_snapshots__/valueupload-have-to-match-list.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx
index 51ba2b143b9..98bcb20caa5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/stories/Upload.stories.tsx
@@ -1,3 +1,4 @@
+import { createRequest } from '../../../Form/Handler/stories/FormHandler.stories'
 import { Form, Value } from '../../..'
 import { P } from '../../../../../elements'
 
@@ -15,13 +16,26 @@ function createMockFile(name: string, size: number, type: string) {
   return file
 }
 
+async function mockAsyncFileFetching({ fileItem }) {
+  const request = createRequest()
+  console.log(
+    'making API request to fetch the url of the file: ' +
+      fileItem.file.name
+  )
+  await request(3000) // Simulate a request
+  window.open(
+    'https://eufemia.dnb.no/images/avatars/' + fileItem.file.name,
+    '_blank'
+  )
+}
+
 export function Upload() {
   return (
-    <Form.Handler
-      data={{
-        foo: 'John',
-        bar: 'Doe',
-        baz: [
+    <>
+      <Value.Upload
+        onFileClick={mockAsyncFileFetching}
+        label="Upload"
+        value={[
           {
             file: createMockFile('fileName-1.png', 1000000, 'image/png'),
             exists: false,
@@ -37,57 +51,85 @@ export function Upload() {
             exists: false,
             id: '3',
           },
-        ],
-        what: ['Foo', 'Bar', 'Baz'],
-      }}
-    >
-      <Form.Card>
-        <P>layout="grid"</P>
-        <Value.SummaryList
-          layout="grid"
-          transformLabel={(label: string) => label.toUpperCase()}
-        >
-          <Value.String label="foo" path="/foo" />
-          <Value.String label="bar" path="/bar" />
-          <Value.Upload label="baz" path="/baz" />
-          <Value.ArraySelection label="what" path="/what" />
-        </Value.SummaryList>
-      </Form.Card>
-      <Form.Card>
-        <P>layout="horizontal"</P>
-        <Value.SummaryList
-          layout="horizontal"
-          transformLabel={(label: string) => label.toUpperCase()}
-        >
-          <Value.String label="foo" path="/foo" />
-          <Value.String label="bar" path="/bar" />
-          <Value.Upload label="baz" path="/baz" />
-          <Value.ArraySelection label="what" path="/what" />
-        </Value.SummaryList>
-      </Form.Card>
-      <Form.Card>
-        <P>layout="vertical"</P>
-        <Value.SummaryList
-          layout="vertical"
-          transformLabel={(label: string) => label.toUpperCase()}
-        >
-          <Value.String label="foo" path="/foo" />
-          <Value.String label="bar" path="/bar" />
-          <Value.Upload label="baz" path="/baz" />
-          <Value.ArraySelection label="what" path="/what" />
-        </Value.SummaryList>
-      </Form.Card>
-      <Form.Card>
-        <P>empty values</P>
-        <Value.SummaryList
-          transformLabel={(label: string) => label.toUpperCase()}
-        >
-          <Value.String label="foo" />
-          <Value.String label="bar" />
-          <Value.Upload label="baz" />
-          <Value.ArraySelection label="what" />
-        </Value.SummaryList>
-      </Form.Card>
-    </Form.Handler>
+          {
+            file: createMockFile('fileName-4.png', 4000000, 'image/png'),
+            exists: false,
+            id: '4',
+          },
+        ]}
+      />
+      <Form.Handler
+        data={{
+          foo: 'John',
+          bar: 'Doe',
+          baz: [
+            {
+              file: createMockFile('fileName-1.png', 1000000, 'image/png'),
+              exists: false,
+              id: '1',
+            },
+            {
+              file: createMockFile('fileName-2.png', 2000000, 'image/png'),
+              exists: false,
+              id: '2',
+            },
+            {
+              file: createMockFile('fileName-3.png', 3000000, 'image/png'),
+              exists: false,
+              id: '3',
+            },
+          ],
+          what: ['Foo', 'Bar', 'Baz'],
+        }}
+      >
+        <Form.Card>
+          <P>layout="grid"</P>
+          <Value.SummaryList
+            layout="grid"
+            transformLabel={(label: string) => label.toUpperCase()}
+          >
+            <Value.String label="foo" path="/foo" />
+            <Value.String label="bar" path="/bar" />
+            <Value.Upload label="baz" path="/baz" />
+            <Value.ArraySelection label="what" path="/what" />
+          </Value.SummaryList>
+        </Form.Card>
+        <Form.Card>
+          <P>layout="horizontal"</P>
+          <Value.SummaryList
+            layout="horizontal"
+            transformLabel={(label: string) => label.toUpperCase()}
+          >
+            <Value.String label="foo" path="/foo" />
+            <Value.String label="bar" path="/bar" />
+            <Value.Upload label="baz" path="/baz" />
+            <Value.ArraySelection label="what" path="/what" />
+          </Value.SummaryList>
+        </Form.Card>
+        <Form.Card>
+          <P>layout="vertical"</P>
+          <Value.SummaryList
+            layout="vertical"
+            transformLabel={(label: string) => label.toUpperCase()}
+          >
+            <Value.String label="foo" path="/foo" />
+            <Value.String label="bar" path="/bar" />
+            <Value.Upload label="baz" path="/baz" />
+            <Value.ArraySelection label="what" path="/what" />
+          </Value.SummaryList>
+        </Form.Card>
+        <Form.Card>
+          <P>empty values</P>
+          <Value.SummaryList
+            transformLabel={(label: string) => label.toUpperCase()}
+          >
+            <Value.String label="foo" />
+            <Value.String label="bar" />
+            <Value.Upload label="baz" />
+            <Value.ArraySelection label="what" />
+          </Value.SummaryList>
+        </Form.Card>
+      </Form.Handler>
+    </>
   )
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/style/dnb-value-upload.scss b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/style/dnb-value-upload.scss
new file mode 100644
index 00000000000..c4fe43c4456
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/style/dnb-value-upload.scss
@@ -0,0 +1,8 @@
+.dnb-forms-value-upload {
+  &__item {
+    .dnb-progress-indicator {
+      display: inline-flex;
+      vertical-align: middle;
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Upload/style/index.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/style/index.ts
new file mode 100644
index 00000000000..141dd27767d
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Upload/style/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-value-upload.scss'
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/index.ts b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/index.ts
index 783bc7bce9e..0155c21c312 100644
--- a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/index.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/index.ts
@@ -3,4 +3,4 @@
  *
  */
 
-import './dnb-value.scss'
+import './dnb-value-block.scss'
diff --git a/packages/dnb-eufemia/src/style/dnb-ui-forms.scss b/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
index ada4841510b..a747dc3fd8d 100644
--- a/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
+++ b/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
@@ -22,5 +22,6 @@
 @import '../extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss';
 @import '../extensions/forms/Iterate/style/dnb-iterate.scss';
 @import '../extensions/forms/ValueBlock/style/dnb-value-block.scss';
+@import '../extensions/forms/Value/Upload/style/dnb-value-upload.scss';
 @import '../extensions/forms/Wizard/style/dnb-wizard-layout.scss';
 @import '../extensions/forms/utils/TestElement/style/dnb-test-element.scss';