feat(Upload): enables disabling of fileMaxSize (#3835)

packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx

@@ -258,3 +258,67 @@ export const UploadAcceptedFormats = () => (
     }}
   </ComponentBox>
 )
+
+export const UploadDisabledFileMaxSize = () => (
+  <ComponentBox hideCode>
+    {() => {
+      const Component = () => {
+        const verifyFileMaxSize = (file: File) => {
+          const errorMapByType = {
+            ['application/pdf']: {
+              fileMaxSizeMb: 4,
+              errorMessage:
+                'Filen du prøver å laste opp er for stor, vi støtter ikke PDF-filer større enn 4 MB.',
+            },
+            ['image/jpeg']: {
+              fileMaxSizeMb: 1,
+              errorMessage:
+                'Filen du prøver å laste opp er for stor, vi støtter ikke JPG-filer større enn 1 MB.',
+            },
+          }
+          const BYTES_IN_A_MEGA_BYTE = 1048576
+
+          const errorObj = errorMapByType[file.type]
+
+          if (
+            errorObj &&
+            // Converts from b (binary) to MB (decimal)
+            file.size / BYTES_IN_A_MEGA_BYTE > errorObj.fileMaxSizeMb
+          ) {
+            return errorObj.errorMessage
+          }
+          return null
+        }
+
+        const { files, setFiles } = Upload.useUpload(
+          'upload-disabled-file-max-size',
+        )
+
+        if (files.length) {
+          console.log('files', files, setFiles)
+        }
+
+        return (
+          <Upload
+            text="Dra & slipp eller velg hvilke filer du vil laste opp. PDF-filer kan ikke være større enn 4 MB og JPG-filer ikke større enn 1 MB."
+            acceptedFileTypes={['jpg', 'pdf']}
+            id="upload-disabled-file-max-size"
+            fileMaxSize={false}
+            onChange={({ files }) => {
+              setFiles(
+                files.map((fileItem) => {
+                  return {
+                    ...fileItem,
+                    errorMessage: verifyFileMaxSize(fileItem.file),
+                  }
+                }),
+              )
+            }}
+          />
+        )
+      }
+
+      return <Component />
+    }}
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx

@@ -10,6 +10,7 @@ import {
   UploadIsLoading,
   UploadErrorMessage,
   UploadAcceptedFormats,
+  UploadDisabledFileMaxSize,
 } from 'Docs/uilib/components/upload/Examples'
 
 ## Demos
@@ -51,3 +52,12 @@ You can pass the file formats as a string array. This will restrict which files
 ### Upload with prefilled error
 
 <UploadPrefilledFileList />
+
+### Upload without file max size, and custom error handling of file size
+
+You can disable the file max size, which will deactivate all file size verifications in the Upload component.
+This can also be used to manually implement more complex file max size verifications, like file max size based on file type, see the example below:
+
+<VisibleWhenNotVisualTest>
+  <UploadDisabledFileMaxSize />
+</VisibleWhenNotVisualTest>

packages/dnb-eufemia/src/components/upload/UploadDocs.ts

@@ -12,7 +12,7 @@ export const UploadProperties: PropertiesTableProps = {
     status: 'optional',
   },
   fileMaxSize: {
-    doc: '`fileMaxSize` is max size of each file in MB. Defaults to 5 MB.',
+    doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',
     type: 'number',
     status: 'optional',
   },

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

@@ -50,15 +50,17 @@ const UploadInfo = () => {
           </Dl.Item>
         )}
 
-        <Dl.Item>
-          <Dt>{fileSizeDescription}</Dt>
-          <Dd>
-            {String(fileSizeContent).replace(
-              '%size',
-              format(fileMaxSize).toString()
-            )}
-          </Dd>
-        </Dl.Item>
+        {fileMaxSize && (
+          <Dl.Item>
+            <Dt>{fileSizeDescription}</Dt>
+            <Dd>
+              {String(fileSizeContent).replace(
+                '%size',
+                format(fileMaxSize).toString()
+              )}
+            </Dd>
+          </Dl.Item>
+        )}
 
         {filesAmountLimit < defaultProps.filesAmountLimit && (
           <Dl.Item>

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

@@ -25,15 +25,17 @@ export function verifyFiles(
   } = context
 
   const handleSize = (file: File) => {
-    return (
+    if (
+      fileMaxSize &&
       // Converts from b (binary) to MB (decimal)
       file.size / BYTES_IN_A_MEGA_BYTE > fileMaxSize
-        ? String(errorLargeFile).replace(
-            '%size',
-            format(fileMaxSize).toString()
-          )
-        : null
-    )
+    ) {
+      return String(errorLargeFile).replace(
+        '%size',
+        format(fileMaxSize).toString()
+      )
+    }
+    return null
   }
 
   const handleType = (file: File) => {

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

@@ -174,6 +174,39 @@ describe('Upload', () => {
       ).toBeInTheDocument()
     })
 
+    it('renders no file size when fileMaxSize is disabled', () => {
+      const fileMaxSize = 0
+      render(<Upload {...defaultProps} fileMaxSize={fileMaxSize} />)
+
+      expect(
+        screen.queryByText(
+          String(nb.fileSizeContent).replace(
+            '%size',
+            fileMaxSize.toString()
+          )
+        )
+      ).not.toBeInTheDocument()
+    })
+
+    it('renders no custom file size when fileMaxSize is disabled', () => {
+      const fileMaxSize = false
+      const fileSizeContent = '%size custom'
+
+      render(
+        <Upload
+          {...defaultProps}
+          fileMaxSize={fileMaxSize}
+          fileSizeContent={fileSizeContent}
+        />
+      )
+
+      expect(
+        screen.queryByText(
+          String(fileSizeContent).replace('%size', `${fileMaxSize}`)
+        )
+      ).not.toBeInTheDocument()
+    })
+
     it('renders the file amount limit description', () => {
       const filesAmountLimit = 2
       render(
@@ -601,6 +634,35 @@ describe('Upload', () => {
         screen.queryByText(`error message ${fileMaxSize}`)
       ).toBeInTheDocument()
     })
+
+    it('returns no file size error message when fileMaxSize is disabled', async () => {
+      const file1 = createMockFile('fileName1.png', 100000000, 'image/png')
+
+      const fileMaxSize = 0
+      const errorMessage = 'error message %size'
+
+      render(
+        <Upload
+          {...defaultProps}
+          fileMaxSize={fileMaxSize}
+          errorLargeFile={errorMessage}
+        />
+      )
+
+      const inputElement = document.querySelector(
+        '.dnb-upload__file-input'
+      )
+
+      await waitFor(() =>
+        fireEvent.change(inputElement, {
+          target: { files: [file1] },
+        })
+      )
+
+      expect(
+        screen.queryByText(`error message ${fileMaxSize}`)
+      ).not.toBeInTheDocument()
+    })
   })
 
   describe('events', () => {

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

@@ -24,6 +24,27 @@ describe('verifyFiles', () => {
     })
   })
 
+  it('returns no file size error message when disabling fileMaxSize', () => {
+    const file1 = createMockFile('fileName1.png', 100000000, 'image/png')
+
+    const fileMaxSize = false
+    const errorLargeFile = 'error message %size'
+
+    const rawFiles = [{ file: file1 }]
+    const acceptedFileTypes = []
+
+    const files = verifyFiles(rawFiles, {
+      fileMaxSize,
+      acceptedFileTypes,
+      errorLargeFile,
+      errorUnsupportedFile: '',
+    })
+
+    expect(files[0]).toEqual({
+      file: file1,
+    })
+  })
+
   it('returns the file type error message', () => {
     const file1 = createMockFile('fileName1.png', 100, 'image/png')
 

packages/dnb-eufemia/src/components/upload/stories/Upload.stories.tsx

@@ -19,20 +19,22 @@ export const UploadSandbox = () => {
     console.log(files1)
   }, [files1])
 
+  const acceptedFileTypes = ['jpg', 'pdf', 'png']
+
   return (
     <Wrapper>
-      {/* <Box>
+      <Box>
         <Upload id="upload-example-1" acceptedFileTypes={['pdf']} />
       </Box>
       <Box>
         <Upload id="upload-example-2" acceptedFileTypes={['jpg', 'pdf']} />
-      </Box> */}
+      </Box>
       <Box>
         <Upload
           title="Upload single file"
           id="upload-example-3"
           filesAmountLimit={2}
-          acceptedFileTypes={['jpg', 'pdf', 'png']}
+          acceptedFileTypes={acceptedFileTypes}
         />
       </Box>
       <Box>
@@ -45,7 +47,7 @@ export const UploadSandbox = () => {
       <Box>
         <Upload
           id="upload-example-5"
-          acceptedFileTypes={['jpg', 'pdf', 'png']}
+          acceptedFileTypes={acceptedFileTypes}
           title="custom title"
           text="custom text"
           fileTypeDescription="custom fileTypeDescription"
@@ -60,12 +62,25 @@ export const UploadSandbox = () => {
         Two Upload components can be controlled using the same id
         <Upload
           id="upload-example-6"
-          acceptedFileTypes={['jpg', 'pdf', 'png']}
+          acceptedFileTypes={acceptedFileTypes}
         />
         <Upload
           top="x-small"
-          id="upload-example-6"
-          acceptedFileTypes={['jpg', 'pdf', 'png']}
+          id="upload-example-7"
+          acceptedFileTypes={acceptedFileTypes}
+        />
+      </Box>
+      <Box>
+        fileMaxSize disabled, hiding file max size
+        <Upload
+          id="upload-example-8"
+          fileMaxSize={0}
+          acceptedFileTypes={acceptedFileTypes}
+        />
+        <Upload
+          id="upload-example-9"
+          fileMaxSize={false}
+          acceptedFileTypes={acceptedFileTypes}
         />
       </Box>
     </Wrapper>

packages/dnb-eufemia/src/components/upload/types.ts

@@ -28,10 +28,10 @@ export type UploadProps = {
   filesAmountLimit?: number
 
   /**
-   * fileMaxSize is max size of each file in MB
+   * Defines the max file size of each file in MB. Use either `0` or `false` to disable.
    * Default: 5 MB
    */
-  fileMaxSize?: number
+  fileMaxSize?: number | false
 
   /**
    * will be called on `files` changes made by the user. Access the files with `{ files }`.