fix(Upload): fix UploadFile type to include id as required (#4218)

More info
[here](https://dnb-it.slack.com/archives/CMXABCHEY/p1730734655581989).

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

@@ -75,7 +75,7 @@ const Upload = (localProps: UploadAllProps) => {
     useUpload(id)
 
   const onInputUpload = useCallback(
-    (newFiles: UploadFile[]) => {
+    (newFiles: Array<UploadFile>) => {
       const mergedFiles = [
         ...files,
         ...newFiles.map((fileItem) => {
@@ -100,7 +100,10 @@ const Upload = (localProps: UploadAllProps) => {
         }
       )
 
-      const validFiles = [...verifiedFiles].slice(0, filesAmountLimit)
+      const validFiles = [...verifiedFiles].slice(
+        0,
+        filesAmountLimit
+      ) as Array<UploadFile>
 
       setFiles(validFiles)
       setInternalFiles(mergedFiles)

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

@@ -9,7 +9,11 @@ import classnames from 'classnames'
 
 import HeightAnimation from '../height-animation/HeightAnimation'
 import { UploadContext } from './UploadContext'
-import type { UploadAllProps, UploadFile, UploadProps } from './types'
+import type {
+  UploadAllProps,
+  UploadFileNative,
+  UploadProps,
+} from './types'
 
 export type UploadDragEvent = React.DragEvent | DragEvent
 
@@ -28,7 +32,7 @@ export default function UploadDropzone({
   const getFiles = useCallback((event: UploadDragEvent) => {
     const fileData = event.dataTransfer
 
-    const files: UploadFile[] = []
+    const files: Array<UploadFileNative> = []
 
     Array.from(fileData.files).forEach((file) => {
       files.push({ file })

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

@@ -19,7 +19,7 @@ import {
   file_xml_medium as xml,
   file_medium as file,
 } from '../../icons'
-import { UploadFile } from './types'
+import { UploadFile, UploadFileNative } from './types'
 
 // Shared
 import { getPreviousSibling, warn } from '../../shared/component-helper'
@@ -42,7 +42,7 @@ export type UploadFileListCellProps = {
   /**
    * Uploaded file
    */
-  uploadFile: UploadFile
+  uploadFile: UploadFile | UploadFileNative
 
   /**
    * Calls onDelete when clicking the delete button

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

@@ -4,12 +4,13 @@ import {
   UploadContextProps,
   UploadAcceptedFileTypes,
   UploadAcceptedFileTypesWithFileMaxSize,
+  UploadFileNative,
 } from './types'
 
 export const BYTES_IN_A_MEGA_BYTE = 1048576
 
 export function verifyFiles(
-  files: UploadFile[],
+  files: Array<UploadFile | UploadFileNative>,
   context: Pick<
     UploadContextProps,
     | 'errorUnsupportedFile'

packages/dnb-eufemia/src/components/upload/__tests__/useUpload.test.tsx

@@ -81,7 +81,7 @@ describe('useUpload', () => {
     render(<MockComponents />)
 
     const sharedState = createSharedState<{
-      files?: UploadFile[]
+      files?: Array<UploadFile>
     }>(id)
     const sharedStateFiles = sharedState.get().files
     expect(sharedStateFiles).toEqual([mockFile])

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

@@ -46,7 +46,7 @@ export type UploadProps = {
   /**
    * will be called on `files` changes made by the user. Access the files with `{ files }`.
    */
-  onChange?: ({ files }: { files: UploadFile[] }) => void
+  onChange?: ({ files }: { files: Array<UploadFile> }) => void
 
   /**
    * will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.
@@ -80,13 +80,16 @@ export type UploadAllProps = UploadProps &
 
 export type UploadContextProps = {
   id?: string
-  onInputUpload: (files: UploadFile[]) => void
+  onInputUpload: (files: Array<UploadFileNative>) => void
 } & Partial<UploadProps>
 
 export type UploadFile = {
   file: File
-  errorMessage?: React.ReactNode
+  id: string
+  exists: boolean
   isLoading?: boolean
-  exists?: boolean
-  id?: string
+  errorMessage?: React.ReactNode
 }
+
+export type UploadFileNative = Omit<UploadFile, 'id' | 'exists'> &
+  Partial<Pick<UploadFile, 'id' | 'exists'>>

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

@@ -1,33 +1,36 @@
 import { useCallback, useMemo } from 'react'
 import { useSharedState } from '../../shared/helpers/useSharedState'
-import type { UploadFile } from './types'
+import type { UploadFile, UploadFileNative } from './types'
 
 export type useUploadReturn = {
-  files: UploadFile[]
-  setFiles: (files: UploadFile[]) => void
-  internalFiles: UploadFile[]
-  setInternalFiles: (files: UploadFile[]) => void
-  getExistingFile: (file: File, fileItems?: UploadFile[]) => UploadFile
+  files: Array<UploadFile>
+  setFiles: (files: Array<UploadFile | UploadFileNative>) => void
+  internalFiles: Array<UploadFile>
+  setInternalFiles: (files: Array<UploadFile>) => void
+  getExistingFile: (
+    file: File,
+    fileItems?: Array<UploadFile>
+  ) => UploadFile
 }
 
 /**
  * Use together with Upload with the same id to manage the files from outside the component.
  */
 function useUpload(id: string): useUploadReturn {
   const { data, extend } = useSharedState<{
-    files?: UploadFile[]
-    internalFiles?: UploadFile[]
+    files?: Array<UploadFile>
+    internalFiles?: Array<UploadFile>
   }>(id)
 
   const setFiles = useCallback(
-    (files: UploadFile[]) => {
+    (files: Array<UploadFile>) => {
       extend({ files })
     },
     [extend]
   )
 
   const setInternalFiles = useCallback(
-    (internalFiles: UploadFile[]) => {
+    (internalFiles: Array<UploadFile>) => {
       extend({ internalFiles })
     },
     [extend]
@@ -40,7 +43,7 @@ function useUpload(id: string): useUploadReturn {
   )
 
   const getExistingFile = useCallback(
-    (file: File, fileItems: UploadFile[] = files) => {
+    (file: File, fileItems: Array<UploadFile> = files) => {
       return fileItems.find(({ file: f }) => {
         return (
           f.name === file.name &&

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

@@ -10,6 +10,7 @@ import {
 import { FieldHelpProps, FieldProps } from '../../types'
 import Upload, {
   UploadFile,
+  UploadFileNative,
   UploadProps,
 } from '../../../../components/Upload'
 import useUpload from '../../../../components/upload/useUpload'
@@ -19,7 +20,7 @@ import { useTranslation as useSharedTranslation } from '../../../../shared'
 import { SpacingProps } from '../../../../shared/types'
 import { FormError } from '../../utils'
 
-export type UploadValue = Array<UploadFile>
+export type UploadValue = Array<UploadFile | UploadFileNative>
 export type Props = FieldHelpProps &
   Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> &
   SpacingProps & {