feat(Upload): define max file size for file type

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

@@ -259,66 +259,43 @@ export const UploadAcceptedFormats = () => (
   </ComponentBox>
 )
 
+export const UploadFileMaxSizeBasedOnFileType = () => (
+  <ComponentBox
+    data-visual-test="upload-file-max-size-based-on-file-format"
+    hideCode
+  >
+    <Upload
+      id="upload-file-max-size-based-on-file-format"
+      fileMaxSize={99}
+      acceptedFileTypes={[
+        { fileType: 'jpg', fileMaxSize: 1 },
+        { fileType: 'doc', fileMaxSize: 1 },
+        { fileType: 'svg', fileMaxSize: 1 },
+        { fileType: 'gif', fileMaxSize: 1 },
+        { fileType: 'doc', fileMaxSize: 4 },
+        { fileType: 'docx', fileMaxSize: 4 },
+        { fileType: 'tiff', fileMaxSize: 5 },
+        { fileType: 'tif', fileMaxSize: 5 },
+        { fileType: 'html', fileMaxSize: 6 },
+        { fileType: 'htm', fileMaxSize: 6 },
+        { fileType: 'xls', fileMaxSize: 7 },
+        { fileType: 'xlsx', fileMaxSize: 7 },
+        { fileType: 'odt' },
+        { fileType: 'pdf' },
+        { fileType: 'text', fileMaxSize: false },
+        { fileType: 'txt', fileMaxSize: 0 },
+        { fileType: 'zip', fileMaxSize: 99 },
+      ]}
+    />
+  </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 />
-    }}
+    <Upload
+      acceptedFileTypes={['jpg', 'pdf']}
+      id="upload-disabled-file-max-size"
+      fileMaxSize={false}
+    />
   </ComponentBox>
 )

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

@@ -11,6 +11,7 @@ import {
   UploadErrorMessage,
   UploadAcceptedFormats,
   UploadDisabledFileMaxSize,
+  UploadFileMaxSizeBasedOnFileType,
 } from 'Docs/uilib/components/upload/Examples'
 
 ## Demos
@@ -53,10 +54,16 @@ You can pass the file formats as a string array. This will restrict which files
 
 <UploadPrefilledFileList />
 
-### Upload without file max size, and custom error handling of file size
+### Upload with file max size based on file type
+
+The table of accepted file types is sorted descending by `maxFileSize`. Multiple `fileType` for the same `maxFileSize` is sorted alphabetically ascending by `fileType`.
+
+<UploadFileMaxSizeBasedOnFileType />
+
+### Upload without file max 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:
+This can also be used to manually implement more complex file max size verifications.
 
 <VisibleWhenNotVisualTest>
   <UploadDisabledFileMaxSize />

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

@@ -4,12 +4,25 @@ showTabs: true
 
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
-import { UploadProperties } from '@dnb/eufemia/src/components/upload/UploadDocs'
+import {
+  UploadProperties,
+  AcceptedFileTypeProperties,
+} from '@dnb/eufemia/src/components/upload/UploadDocs'
 
 ## Properties
 
 <PropertiesTable props={UploadProperties} />
 
+## AcceptedFileType
+
+The accepted file type object is used to define file max size for specific file types.
+
+When providing a list of AcceptedFileType to [Uploads](/uilib/components/upload/properties/#properties) `acceptedFileTypes`, the accepted file types will be presented in a table. Here is an [example](/uilib/components/upload/demos/#upload-with-file-max-size-based-on-file-type).
+
+The table is sorted descending by `maxFileSize`. Multiple `fileType` for the same `maxFileSize` is sorted alphabetically ascending by `fileType`.
+
+<PropertiesTable props={AcceptedFileTypeProperties} />
+
 ## Translations
 
 All translation keys listed in the translations table below, can be used as a component property (like `title` or `text`).

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

@@ -54,6 +54,7 @@ const Upload = (localProps: UploadAllProps) => {
     onFileDelete, // eslint-disable-line
     title, // eslint-disable-line
     text, // eslint-disable-line
+    fileTypeTableCaption, // eslint-disable-line
     fileTypeDescription, // eslint-disable-line
     fileSizeDescription, // eslint-disable-line
     fileAmountDescription, // eslint-disable-line

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

@@ -2,8 +2,8 @@ import { PropertiesTableProps } from '../../shared/types'
 
 export const UploadProperties: PropertiesTableProps = {
   acceptedFileTypes: {
-    doc: 'List of accepted file types.',
-    type: 'Array<string>',
+    doc: 'List of accepted file types. Either as string or [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype). When providing a list of [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype), the accepted file types will be presented in a table(see [example](/uilib/components/upload/demos/#upload-with-file-max-size-based-on-file-type)).',
+    type: ['Array<string>', 'Array<AcceptedFileType>'],
     status: 'required',
   },
   filesAmountLimit: {
@@ -13,7 +13,7 @@ export const UploadProperties: PropertiesTableProps = {
   },
   fileMaxSize: {
     doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',
-    type: 'number',
+    type: ['number', 'false'],
     status: 'optional',
   },
   title: {
@@ -38,6 +38,19 @@ export const UploadProperties: PropertiesTableProps = {
   },
 }
 
+export const AcceptedFileTypeProperties: PropertiesTableProps = {
+  fileType: {
+    doc: 'The name of the accepted file type.',
+    type: 'string',
+    status: 'required',
+  },
+  fileMaxSize: {
+    doc: 'Defines the max file size of the given file type in MB. Use either `0` or `false` to disable. If not provided, it defaults to the value of [Uploads](/uilib/components/upload/properties/#properties) `fileMaxSize` which defaults to 5 MB.',
+    type: ['number', 'false'],
+    status: 'optional',
+  },
+}
+
 export const UploadEvents: PropertiesTableProps = {
   onChange: {
     doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).',