fix(forms): add sessionStorageId support to Field.Upload with empty…

… file list rendering (#4339)

When using `sessionStorageId` on `Form.Handler` alongside `Field.Upload`
with a specified path, file data is stored. However, during
serialization, Blob information is not preserved in session storage. As
a result, reading this data causes `Field.Upload` to throw an exception.

This PR ensures invalid files are not rendered, preventing such errors.

In the future, we could explore storing Blobs in IndexedDB, but that
would require a more extensive effort.

packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx

@@ -118,7 +118,11 @@ function UploadComponent(props: Props) {
   const { files: fileContext, setFiles } = useUpload(id)
 
   useEffect(() => {
-    setFiles(value)
+    // Files stored in session storage will not have a property (due to serialization).
+    const hasInvalidFiles = value?.some(({ file }) => !file?.name)
+    if (!hasInvalidFiles) {
+      setFiles(value)
+    }
   }, [setFiles, value])
 
   const handleChangeAsync = useCallback(

packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/Upload.test.tsx

@@ -1253,4 +1253,57 @@ describe('Field.Upload', () => {
       )
     })
   })
+
+  it('should not set files from session storage if they are invalid', async () => {
+    const file = createMockFile('fileName.png', 100, 'image/png')
+
+    const { unmount } = render(
+      <Form.Handler sessionStorageId="session-storage-id">
+        <Field.Upload path="/myFiles" />
+      </Form.Handler>
+    )
+
+    const element = getRootElement()
+
+    await waitFor(() =>
+      fireEvent.drop(element, {
+        dataTransfer: {
+          files: [file],
+        },
+      })
+    )
+
+    expect(
+      document.querySelectorAll('.dnb-upload__file-cell').length
+    ).toBe(1)
+
+    let dataContext = null
+
+    // Don't rerender, but render again to make sure the files are not set
+    unmount()
+    render(
+      <Form.Handler sessionStorageId="session-storage-id">
+        <Field.Upload path="/myFiles" />
+        <DataContext.Consumer>
+          {(context) => {
+            dataContext = context
+            return null
+          }}
+        </DataContext.Consumer>
+      </Form.Handler>
+    )
+
+    expect(dataContext.internalDataRef.current.myFiles).toEqual([
+      {
+        exists: false,
+        file: {},
+        id: expect.any(String),
+      },
+    ])
+    const [title] = Array.from(document.querySelectorAll('p'))
+    expect(title).toHaveTextContent(nbShared.Upload.title)
+    expect(
+      document.querySelectorAll('.dnb-upload__file-cell').length
+    ).toBe(0)
+  })
 })