[BUG] - Removing images results in an error

[horosin]

Description

When removing images, the file component throws an error. Can't find a way to bypass this.

Reproduction URL

https://github.com/premieroctet/next-admin/blob/main/apps/example

Reproduction steps

Reproducible in demo environment.

1. Go to 'https://next-admin-po.vercel.app/en/admin/user/1'
2. Click "X" near the image to remove it
3. Click "Save"
4. See error "Application error: a client-side exception has occurred (see the browser console for more information)."

Console: TypeError: null is not an object (evaluating 'n.name')

Next router

App router

Next Admin version

7.3.0

Screenshots

Next Admin options

edit: {
        display: ["name", "clientType", "userLimit", "logo"],
        fields: {
          logo: {
            format: "file",
            handler: {
              upload: async (buffer, infos, context) => {
                return "https://static.cdnlogo.com/logos/t/75/tesla.svg";
              },
              deleteFile: async (fileUri: string) => {
                return true;
              }
            }
          }
        },
      },


OR what is in the official example repository

Logs

app-router.js:53 TypeError: Cannot read properties of null (reading 'name')
    at eval (FileWidget.js:121:72)
    at Array.map (<anonymous>)
    at FileWidget (FileWidget.js:117:533)
    at react-stack-bottom-frame (react-dom-client.development.js:23610:20)
    at renderWithHooks (react-dom-client.development.js:4646:22)
    at updateFunctionComponent (react-dom-client.development.js:8032:19)
    at beginWork (react-dom-client.development.js:9689:18)
    at runWithFiberInDEV (react-dom-client.development.js:544:16)
    at performUnitOfWork (react-dom-client.development.js:15064:22)
    at workLoopSync (react-dom-client.development.js:14888:41)
    at renderRootSync (react-dom-client.development.js:14868:11)
    at performWorkOnRoot (react-dom-client.development.js:14394:44)
    at performSyncWorkOnRoot (react-dom-client.development.js:15970:7)
    at flushSyncWorkAcrossRoots_impl (react-dom-client.development.js:15830:21)
    at processRootScheduleInMicrotask (react-dom-client.development.js:15864:7)
    at eval (react-dom-client.development.js:15986:13)

The above error occurred in the <FileWidget> component. It was handled by the <ReactDevOverlay> error boundary.

Browsers

Chrome, Safari

[horosin]

Inspecting this more I've also noticed the file path is not deleted from the database. It's only removing what appears to be the original filename from the string in the field (which is full path)

[horosin]

The root cause is this line:

        newFormData[props.name] = [null];

https://github.com/premieroctet/next-admin/blob/main/packages/next-admin/src/components/inputs/FileWidget/FileWidget.tsx#L71

Later causing accessing name property on null here:

              key={`${typeof file === "string" ? file : file.name}`}

https://github.com/premieroctet/next-admin/blob/main/packages/next-admin/src/components/inputs/FileWidget/FileWidget.tsx#L177C1-L177C69