diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
index 38c4ad85981..44e857ffbb4 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
@@ -57,6 +57,35 @@ export const UploadPrefilledFileList = () => (
)
+export const UploadHideFileExtenstionText = () => (
+
+ {() => {
+ const Component = () => {
+ const { files, setFiles } = Upload.useUpload('my-file-list')
+
+ if (files.length) {
+ console.log('files', files)
+ }
+
+ useMockFiles(setFiles, {})
+
+ return (
+
+ )
+ }
+
+ return
+ }}
+
+)
+
export const UploadBasic = () => (
@@ -286,6 +315,7 @@ export const UploadFileMaxSizeBasedOnFileType = () => (
{ fileType: 'txt', fileMaxSize: 0 },
{ fileType: 'zip', fileMaxSize: 99 },
]}
+ displayFileExtensionText={false}
/>
)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx
index 2d85d0cadfa..f0b75b7b22b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx
@@ -13,6 +13,7 @@ import {
UploadDisabledFileMaxSize,
UploadFileMaxSizeBasedOnFileType,
UploadFileMaxSizeBasedOnFileTypeDisabled,
+ UploadHideFileExtenstionText,
} from 'Docs/uilib/components/upload/Examples'
## Demos
@@ -75,3 +76,7 @@ This can also be used to manually implement more complex file max size verificat
+
+
+
+
diff --git a/packages/dnb-eufemia/src/components/upload/Upload.tsx b/packages/dnb-eufemia/src/components/upload/Upload.tsx
index fb065a95366..44fe41152c0 100644
--- a/packages/dnb-eufemia/src/components/upload/Upload.tsx
+++ b/packages/dnb-eufemia/src/components/upload/Upload.tsx
@@ -66,6 +66,7 @@ const Upload = (localProps: UploadAllProps) => {
errorAmountLimit, // eslint-disable-line
deleteButton, // eslint-disable-line
fileListAriaLabel, // eslint-disable-line
+ displayFileExtensionText, // eslint-disable-line
...props
} = extendedProps
diff --git a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts
index e094e1e2a2f..d36921e4730 100644
--- a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts
+++ b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts
@@ -7,12 +7,12 @@ export const UploadProperties: PropertiesTableProps = {
status: 'required',
},
filesAmountLimit: {
- doc: 'Defines the amount of files the user can select and upload. Defaults to 100.',
+ doc: 'Defines the amount of files the user can select and upload. Defaults to `100`.',
type: 'number',
status: 'optional',
},
fileMaxSize: {
- doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. 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`, 5 MB.',
type: ['number', 'false'],
status: 'optional',
},
@@ -26,6 +26,11 @@ export const UploadProperties: PropertiesTableProps = {
type: 'string',
status: 'optional',
},
+ displayFileExtensionText: {
+ doc: 'Defines if the file extension should be displayed in the file list for each file. Defaults to `true`.',
+ type: 'boolean',
+ status: 'optional',
+ },
skeleton: {
doc: 'Skeleton should be applied when loading content.',
type: 'boolean',
diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx
index 7804e194122..3c6969f1a37 100644
--- a/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx
+++ b/packages/dnb-eufemia/src/components/upload/UploadFileList.tsx
@@ -14,6 +14,7 @@ function UploadFileList() {
loadingText,
onFileDelete,
onChange,
+ displayFileExtensionText,
} = context
const { files, setFiles, setInternalFiles } = useUpload(id)
@@ -50,6 +51,7 @@ function UploadFileList() {
onDelete={onDeleteHandler}
deleteButtonText={deleteButton}
loadingText={loadingText}
+ displayFileExtensionText={displayFileExtensionText}
/>
)
})}
diff --git a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
index 0649fa26e92..7ec9f8d90ed 100644
--- a/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
+++ b/packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx
@@ -45,6 +45,11 @@ export type UploadFileListCellProps = {
*/
uploadFile: UploadFile
+ /**
+ * Wether or not to display the file extension text for the uploaded file
+ */
+ displayFileExtensionText?: boolean
+
/**
* Calls onDelete when clicking the delete button
*/
@@ -63,6 +68,7 @@ const UploadFileListCell = ({
onDelete,
loadingText,
deleteButtonText,
+ displayFileExtensionText = true,
}: UploadFileListCellProps) => {
const { file, errorMessage, isLoading } = uploadFile
const hasWarning = errorMessage != null
@@ -169,13 +175,15 @@ const UploadFileListCell = ({
>
{file.name}
-
- {humanFileType}
-
+ {displayFileExtensionText && (
+
+ {humanFileType}
+
+ )}
)
}
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts b/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts
index 181a9489042..b13387de88e 100644
--- a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/components/upload/__tests__/Upload.screenshot.test.ts
@@ -35,6 +35,13 @@ describe.each(['ui', 'sbanken'])('Upload for %s', (themeName) => {
expect(screenshot).toMatchImageSnapshot()
})
+ it('have to hide the file extension text', async () => {
+ const screenshot = await makeScreenshot({
+ selector: '[data-visual-test="upload-hides-file-extension-text"]',
+ })
+ expect(screenshot).toMatchImageSnapshot()
+ })
+
it('have to match file max size based on file type table', async () => {
const screenshot = await makeScreenshot({
selector:
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx
index 3da15c7c38b..82908afaf12 100644
--- a/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx
+++ b/packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx
@@ -65,8 +65,26 @@ describe('UploadFileListCell', () => {
)
const element = document.querySelector('.dnb-upload__file-cell__title')
+ const fileExtension = document.querySelector(
+ '.dnb-upload__file-cell__subtitle'
+ )
expect(element.textContent).toMatch('file.dat')
+ expect(fileExtension.textContent).toMatch('DAT')
+ })
+
+ it('supports not displaying file extension text', async () => {
+ render(
+
+ )
+
+ expect(
+ document.querySelector('.dnb-upload__file-cell__subtitle')
+ ).not.toBeInTheDocument()
})
it('renders the no error styling', () => {
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-hide-the-file-extension-text.snap.png b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-hide-the-file-extension-text.snap.png
new file mode 100644
index 00000000000..a859ba08817
Binary files /dev/null and b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-sbanken-have-to-hide-the-file-extension-text.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-hide-the-file-extension-text.snap.png b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-hide-the-file-extension-text.snap.png
new file mode 100644
index 00000000000..5ce0838bcdf
Binary files /dev/null and b/packages/dnb-eufemia/src/components/upload/__tests__/__image_snapshots__/upload-for-ui-have-to-hide-the-file-extension-text.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/upload/types.ts b/packages/dnb-eufemia/src/components/upload/types.ts
index c93e10d2dd8..2860cbe0753 100644
--- a/packages/dnb-eufemia/src/components/upload/types.ts
+++ b/packages/dnb-eufemia/src/components/upload/types.ts
@@ -53,6 +53,12 @@ export type UploadProps = {
*/
onFileDelete?: ({ fileItem }: { fileItem: UploadFile }) => void
+ /**
+ * Defines if the file extension should be displayed in the file list for each file.
+ * Default: true
+ */
+ displayFileExtensionText?: boolean
+
/**
* Custom text properties
*/