fix(Forms): add support for sessionStorageId in Field.Upload

dnbexperience · Dec 20, 2024 · 927dd00 · 927dd00
1 parent 41e4131
commit 927dd00
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx
@@ -83,9 +83,21 @@ function UploadComponent(props: Props) {
     [formsTr.errorRequired]
   )
 
+  const fromInput = useCallback((value: UploadValue) => {
+    value.forEach((item, index) => {
+      value[index] = item
+
+      // Store the name in the value, to support session storage (serialization)
+      value[index]['name'] = item['name'] || item.file?.name
+    })
+
+    return value
+  }, [])
+
   const preparedProps = {
     errorMessages,
     validateRequired,
+    fromInput,
     ...props,
   }
 
@@ -128,10 +140,16 @@ function UploadComponent(props: Props) {
   }, [files])
 
   useEffect(() => {
-    // Files stored in session storage will not have a property (due to serialization).
-    const hasInvalidFiles = value?.some(({ file }) => !file?.name)
-    if (!hasInvalidFiles) {
-      setFiles(value)
+    if (Array.isArray(value)) {
+      setFiles(
+        value.map((item) => {
+          if (item.file && !(item.file instanceof File)) {
+            // To support session storage, we recreated the file blob.
+            item['file'] = new File([], item['name'])
+          }
+          return item
+        })
+      )
     }
   }, [setFiles, value])
 
@@ -173,7 +191,7 @@ function UploadComponent(props: Props) {
         handleChange(existingFiles)
       }
     },
-    [files, setFiles, fileHandler, handleChange]
+    [setFiles, fileHandler, handleChange]
   )
 
   const changeHandler = useCallback(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx
@@ -207,11 +207,13 @@ describe('Field.Upload', () => {
               file: file1,
               id: expect.any(String),
               exists: expect.any(Boolean),
+              name: 'fileName-1.png',
             },
             {
               file: file2,
               id: expect.any(String),
               exists: expect.any(Boolean),
+              name: 'fileName-2.png',
             },
           ],
         },
@@ -256,6 +258,7 @@ describe('Field.Upload', () => {
               file: file1,
               exists: false,
               id: expect.anything(),
+              name: 'fileName-1.png',
             },
             {
               errorMessage: nbShared.Upload.errorLargeFile.replace(
@@ -265,6 +268,7 @@ describe('Field.Upload', () => {
               file: file2,
               exists: false,
               id: expect.anything(),
+              name: 'fileName-2.png',
             },
           ],
         },
@@ -276,6 +280,7 @@ describe('Field.Upload', () => {
           file: file1,
           exists: false,
           id: expect.anything(),
+          name: 'fileName-1.png',
         },
         {
           errorMessage: nbShared.Upload.errorLargeFile.replace(
@@ -285,6 +290,7 @@ describe('Field.Upload', () => {
           file: file2,
           exists: false,
           id: expect.anything(),
+          name: 'fileName-2.png',
         },
       ])
 
@@ -310,6 +316,7 @@ describe('Field.Upload', () => {
               file: file1,
               exists: false,
               id: expect.anything(),
+              name: 'fileName-1.png',
             },
           ],
         },
@@ -353,6 +360,7 @@ describe('Field.Upload', () => {
               exists: false,
               file: file1,
               id: expect.any(String),
+              name: 'fileName-1.png',
             }),
           ],
         },
@@ -399,6 +407,7 @@ describe('Field.Upload', () => {
               exists: false,
               file: file1,
               id: expect.any(String),
+              name: 'fileName-1.png',
             }),
           ],
         },
@@ -468,6 +477,7 @@ describe('Field.Upload', () => {
               file: file1,
               exists: false,
               id: expect.anything(),
+              name: 'fileName-1.png',
             },
           ],
         },
@@ -734,6 +744,7 @@ describe('Field.Upload', () => {
               file: file1,
               exists: false,
               id: expect.anything(),
+              name: 'fileName-1.png',
             },
           ],
         },
@@ -1475,7 +1486,7 @@ describe('Field.Upload', () => {
     })
   })
 
-  it('should not set files from session storage if they are invalid', async () => {
+  it('should recreate files from session storage', async () => {
     const file = createMockFile('fileName.png', 100, 'image/png')
 
     const { unmount } = render(
@@ -1517,15 +1528,16 @@ describe('Field.Upload', () => {
     expect(dataContext.internalDataRef.current.myFiles).toEqual([
       {
         exists: false,
-        file: {},
+        file: new File([], 'fileName.png'),
         id: expect.any(String),
+        name: 'fileName.png',
       },
     ])
     const [title] = Array.from(document.querySelectorAll('p'))
     expect(title).toHaveTextContent(nbShared.Upload.title)
     expect(
       document.querySelectorAll('.dnb-upload__file-cell').length
-    ).toBe(0)
+    ).toBe(1)
   })
 
   describe('transformIn and transformOut', () => {