fix(Upload): display files without anchor when their size is not given (

#4390)

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/Examples.tsx

@@ -524,3 +524,29 @@ export const OnFileClick = () => {
     </ComponentBox>
   )
 }
+
+export const DisplayFileAsNonClickable = () => {
+  return (
+    <ComponentBox
+      hideCode
+      scope={{ createMockFile }}
+      data-visual-test="upload-value-display-file-as-non-clickable"
+    >
+      <Value.Upload
+        label="Label text"
+        value={[
+          {
+            file: createMockFile('35217511.jpg', 0, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+          {
+            file: createMockFile('1501870.jpg', undefined, 'image/png'),
+            exists: false,
+            id: '2',
+          },
+        ]}
+      />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Upload/demos.mdx

@@ -54,6 +54,12 @@ import * as Examples from './Examples'
 
 <Examples.OnFileClick />
 
+### Display files as non-clickable
+
+When file size is 0 or not given (`new File([], name, { type })`), the file is displayed as a span instead of an anchor. How ever, when `onFileClick` is given, the file will be clickable as a button.
+
+<Examples.DisplayFileAsNonClickable />
+
 <VisibleWhenVisualTest>
   <Examples.LabelAndValueOnFileClick />
   <Examples.ListVariantsOnFileClick />

packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx

@@ -91,7 +91,7 @@ const UploadFileListCell = ({
   const { file, errorMessage, isLoading } = uploadFile
   const hasWarning = errorMessage != null
 
-  const imageUrl = URL.createObjectURL(file)
+  const imageUrl = file?.size > 0 ? URL.createObjectURL(file) : null
   const cellRef = useRef<HTMLLIElement>()
   const exists = useExistsHighlight(id, file)
 

packages/dnb-eufemia/src/components/upload/UploadFileListLink.tsx

@@ -1,18 +1,25 @@
 import React from 'react'
-
+import classNames from 'classnames'
 import Anchor from '../../components/Anchor'
 import Button from '../button/Button'
+import Span from '../../elements/Span'
 import { SpacingProps } from '../space/types'
 import { createSpacingClasses } from '../space/SpacingUtils'
-import classNames from 'classnames'
 
 export type UploadFileLinkProps = UploadFileAnchorProps &
   UploadFileButtonProps
 
 export const UploadFileLink = (props: UploadFileLinkProps) => {
   const { onClick, text, href, download, ...rest } = props
-  if (onClick)
+
+  if (!onClick && !href) {
+    return <Span {...rest}>{text}</Span>
+  }
+
+  if (onClick) {
     return <UploadFileButton text={text} onClick={onClick} {...rest} />
+  }
+
   return (
     <UploadFileAnchor
       text={text}

packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx

@@ -206,6 +206,52 @@ describe('UploadFileListCell', () => {
     })
   })
 
+  it('renders a span when file size is 0', () => {
+    const fileName = 'file.png'
+
+    render(
+      <UploadFileListCell
+        {...defaultProps}
+        uploadFile={{ file: createMockFile(fileName, 0, 'image/png') }}
+      />
+    )
+    expect(screen.queryByText(fileName).tagName).toBe('SPAN')
+    expect(screen.queryByText(fileName)).toHaveClass('dnb-span')
+  })
+
+  it('renders a span when file size is not given', () => {
+    const fileName = 'file.png'
+
+    render(
+      <UploadFileListCell
+        {...defaultProps}
+        uploadFile={{
+          file: createMockFile(fileName, undefined, 'image/png'),
+        }}
+      />
+    )
+    expect(screen.queryByText(fileName).tagName).toBe('SPAN')
+    expect(screen.queryByText(fileName)).toHaveClass('dnb-span')
+  })
+
+  it('renders a button when file size is invalid, but onClick is given', () => {
+    const fileName = 'file.png'
+
+    render(
+      <UploadFileListCell
+        {...defaultProps}
+        uploadFile={{
+          file: createMockFile(fileName, undefined, 'image/png'),
+        }}
+        onClick={jest.fn()}
+      />
+    )
+
+    expect(screen.queryByText(fileName).parentElement.tagName).toBe(
+      'BUTTON'
+    )
+  })
+
   describe('File Anchor', () => {
     it('renders the anchor', () => {
       const fileName = 'file.png'
@@ -216,13 +262,14 @@ describe('UploadFileListCell', () => {
           uploadFile={{ file: createMockFile(fileName, 100, 'image/png') }}
         />
       )
-      expect(screen.queryByText(fileName)).toBeInTheDocument()
+      expect(screen.queryByText(fileName).tagName).toBe('A')
     })
 
     it('renders the anchor href', () => {
       const fileName = 'file.png'
       const mockUrl = 'mock-url'
 
+      const originalCreateObjectURL = global.URL.createObjectURL
       global.URL.createObjectURL = jest.fn().mockReturnValueOnce(mockUrl)
 
       render(
@@ -237,6 +284,8 @@ describe('UploadFileListCell', () => {
         fileName
       ) as HTMLAnchorElement
       expect(anchorElement.href).toMatch(mockUrl)
+
+      global.URL.createObjectURL = originalCreateObjectURL
     })
 
     it('renders the download attribute', () => {

packages/dnb-eufemia/src/extensions/forms/Value/Upload/Upload.tsx

@@ -125,7 +125,7 @@ function UploadFileItem(
     }
   }
 
-  const imageUrl = URL.createObjectURL(file)
+  const imageUrl = file?.size > 0 ? URL.createObjectURL(file) : null
 
   const text = file.name + (displaySize ? ' ' + getSize(file.size) : '')
   const isLoading = fileIsLoading || loading

packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.screenshot.test.ts

@@ -57,4 +57,12 @@ describe('Value.Upload', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match files as non-clickable', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="upload-value-display-file-as-non-clickable"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })

packages/dnb-eufemia/src/extensions/forms/Value/Upload/__tests__/Upload.test.tsx

@@ -322,6 +322,24 @@ describe('Value.Upload', () => {
     })
   })
 
+  it('renders a span when file size is 0', () => {
+    const fileName = 'file.png'
+
+    render(
+      <Value.Upload
+        value={[
+          {
+            file: createMockFile(fileName, 0, 'image/png'),
+            exists: false,
+            id: '1',
+          },
+        ]}
+      />
+    )
+    expect(screen.queryByText(fileName).tagName).toBe('SPAN')
+    expect(screen.queryByText(fileName)).toHaveClass('dnb-span')
+  })
+
   describe('File Anchor', () => {
     it('renders the anchor', () => {
       const fileName = 'file.png'
@@ -337,7 +355,7 @@ describe('Value.Upload', () => {
           ]}
         />
       )
-      expect(screen.queryByText(fileName)).toBeInTheDocument()
+      expect(screen.queryByText(fileName).tagName).toBe('A')
     })
 
     it('executes onFileClick event when button is clicked', () => {
@@ -415,6 +433,7 @@ describe('Value.Upload', () => {
       const fileName = 'file.png'
       const mockUrl = 'mock-url'
 
+      const originalCreateObjectURL = global.URL.createObjectURL
       global.URL.createObjectURL = jest.fn().mockReturnValueOnce(mockUrl)
 
       render(
@@ -432,6 +451,8 @@ describe('Value.Upload', () => {
         fileName
       ) as HTMLAnchorElement
       expect(anchorElement.href).toMatch(mockUrl)
+
+      global.URL.createObjectURL = originalCreateObjectURL
     })
 
     it('renders the download attribute', () => {