feat(Upload): make id optional

dnbexperience · Dec 13, 2024 · a20dbc8 · a20dbc8
1 parent 1800282
commit a20dbc8
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 30 deletions.
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
@@ -56,17 +56,7 @@ export const UploadPrefilledFileList = () => (
 
 export const UploadBasic = () => (
   <ComponentBox data-visual-test="upload-basic">
-    {() => {
-      const Component = () => {
-        const myUploadId = 'unique-id' // or a function, object or React Context reference
-
-        return (
-          <Upload acceptedFileTypes={['jpg', 'png']} id={myUploadId} />
-        )
-      }
-
-      return <Component />
-    }}
+    <Upload acceptedFileTypes={['jpg', 'png']} />
   </ComponentBox>
 )
 
@@ -98,14 +88,12 @@ export const UploadRemoveFile = () => (
   <ComponentBox data-visual-test="upload-remove-files">
     {() => {
       const Component = () => {
-        const { files, setFiles } = Upload.useUpload('upload-remove-files')
+        const myUploadId = 'unique-id' // or a function, object or React Context reference.
+        const { files, setFiles } = Upload.useUpload(myUploadId) // id is needed when wanting to connect with the useUpload hook.
 
         return (
           <>
-            <Upload
-              acceptedFileTypes={['jpg', 'png']}
-              id="upload-remove-files"
-            />
+            <Upload acceptedFileTypes={['jpg', 'png']} id={myUploadId} />
 
             <Button
               top="small"
@@ -279,7 +267,6 @@ export const UploadFileMaxSizeBasedOnFileType = () => (
     hideCode
   >
     <Upload
-      id="upload-file-max-size-based-on-file-format"
       fileMaxSize={99}
       acceptedFileTypes={[
         { fileType: 'jpg', fileMaxSize: 1 },
@@ -307,7 +294,6 @@ export const UploadFileMaxSizeBasedOnFileType = () => (
 export const UploadFileMaxSizeBasedOnFileTypeDisabled = () => (
   <ComponentBox>
     <Upload
-      id="upload-file-max-size-based-on-file-format-disabled"
       acceptedFileTypes={[
         { fileType: 'jpg', fileMaxSize: 0 },
         { fileType: 'doc', fileMaxSize: false },
@@ -319,11 +305,7 @@ export const UploadFileMaxSizeBasedOnFileTypeDisabled = () => (
 
 export const UploadDisabledFileMaxSize = () => (
   <ComponentBox data-visual-test="upload-disabled-file-max-size">
-    <Upload
-      acceptedFileTypes={['jpg', 'pdf']}
-      id="upload-disabled-file-max-size"
-      fileMaxSize={false}
-    />
+    <Upload acceptedFileTypes={['jpg', 'pdf']} fileMaxSize={false} />
   </ComponentBox>
 )
 
@@ -333,7 +315,6 @@ export const UploadNoTitleNoText = () => (
       title={false}
       text={false}
       acceptedFileTypes={['jpg', 'png']}
-      id="upload-no-title-no-text"
     />
   </ComponentBox>
 )
@@ -357,7 +338,6 @@ export const UploadOnFileDeleteAsync = () => (
         <Upload
           onFileDelete={mockAsyncFileRemoval}
           acceptedFileTypes={['jpg', 'png']}
-          id="upload-on-file-delete"
         />
       )
     }}

diff --git a/packages/dnb-eufemia/src/components/upload/Upload.tsx b/packages/dnb-eufemia/src/components/upload/Upload.tsx
@@ -9,6 +9,7 @@ import {
   extendPropsWithContext,
   makeUniqueId,
 } from '../../shared/component-helper'
+import useId from '../../shared/helpers/useId'
 
 // Internal
 import UploadFileInput from './UploadFileInput'
@@ -44,7 +45,7 @@ const Upload = (localProps: UploadAllProps) => {
   )
 
   const {
-    id,
+    id: idProp,
     skeleton,
     className,
     acceptedFileTypes,
@@ -73,6 +74,8 @@ const Upload = (localProps: UploadAllProps) => {
 
   const spacingClasses = createSpacingClasses(props)
 
+  const id = useId(idProp)
+
   const { files, setFiles, setInternalFiles, getExistingFile } =
     useUpload(id)
 

diff --git a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts
@@ -2,9 +2,9 @@ import { PropertiesTableProps } from '../../shared/types'
 
 export const UploadProperties: PropertiesTableProps = {
   id: {
-    doc: 'Unique id used with the useUpload hook to manage the files.',
+    doc: 'Unique id used with the useUpload hook to manage the files. Needed when wanting to connect with the useUpload hook.',
     type: ['string', 'Function', 'Object', 'React.Context'],
-    status: 'required',
+    status: 'optional',
   },
   acceptedFileTypes: {
     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)).',

diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/components/upload/__tests__/Upload.test.tsx
@@ -21,7 +21,6 @@ const en = enGB['en-GB'].Upload
 global.URL.createObjectURL = jest.fn(() => 'url')
 
 const defaultProps: UploadAllProps = {
-  id: 'id',
   acceptedFileTypes: ['png'],
 }
 
@@ -932,6 +931,68 @@ describe('Upload', () => {
         screen.queryByText(`file length is more than 5`)
       ).toBeInTheDocument()
     })
+
+    it('keeps files in shared state when providing id', async () => {
+      const files = [
+        createMockFile('fileName1.png', 100, 'image/png'),
+        createMockFile('fileName2.png', 200, 'image/png'),
+      ]
+
+      const id = 'random-id-unmount'
+
+      const { unmount } = render(<Upload {...defaultProps} id={id} />)
+
+      const inputElement = document.querySelector(
+        '.dnb-upload__file-input'
+      )
+      await waitFor(() =>
+        fireEvent.change(inputElement, {
+          target: { files },
+        })
+      )
+
+      expect(
+        document.querySelectorAll('.dnb-upload__file-cell').length
+      ).toBe(2)
+
+      unmount()
+
+      render(<Upload {...defaultProps} id={id} />)
+
+      expect(
+        document.querySelectorAll('.dnb-upload__file-cell').length
+      ).toBe(2)
+    })
+
+    it('removes files when unmounting when not providing id', async () => {
+      const files = [
+        createMockFile('fileName1.png', 100, 'image/png'),
+        createMockFile('fileName2.png', 200, 'image/png'),
+      ]
+
+      const { unmount } = render(<Upload {...defaultProps} />)
+
+      const inputElement = document.querySelector(
+        '.dnb-upload__file-input'
+      )
+      await waitFor(() =>
+        fireEvent.change(inputElement, {
+          target: { files },
+        })
+      )
+
+      expect(
+        document.querySelectorAll('.dnb-upload__file-cell').length
+      ).toBe(2)
+
+      unmount()
+
+      render(<Upload {...defaultProps} />)
+
+      expect(
+        document.querySelectorAll('.dnb-upload__file-cell').length
+      ).toBe(0)
+    })
   })
 
   describe('events', () => {

diff --git a/packages/dnb-eufemia/src/components/upload/types.ts b/packages/dnb-eufemia/src/components/upload/types.ts
@@ -17,7 +17,7 @@ export type UploadProps = {
   /**
    * unique id used with the useUpload hook to manage the files
    */
-  id: SharedStateId
+  id?: SharedStateId
 
   /**
    * list of accepted file types.