Incorrect operation of upload property in avatar field configuration in next-admin library

[joriksp]

Problem description

When using the upload property in the avatar field configuration in the User model, a problem occurs: instead of the expected string returned from the upload handler, the actual file itself is sent in the user change form. This leads to incorrect data processing on the server and can cause errors when saving data.

Steps for playback

1. Configure the User model with the avatar field as shown in the example:

import { upload } from "@/lib/fileStorage";
import type { NextAdminOptions } from "@premieroctet/next-admin";

const options: NextAdminOptions = {
  model: {
     User: {
        edit: {
           fields: {
              avatar: {
                 format: "file",
                 required: true,
                 handler: {
                    upload: async (buffer, { name, type }) => {
                          const uploadedFile = await upload(
                             new File([buffer], name)
                          );
                          return uploadedFile.url || "";
                       },
                 },
              },
           },
        },
     },
  }
}

export default options;

2. Try to change the user by uploading a file for the avatar field.
3. Pay attention to the data sent to the server.

Expected behavior

When uploading a file, the value returned from the upload handler (in this case, the file name) should be sent for the avatar field, not the file itself.

Actual behavior

The file itself is sent to the server, not the file name, which causes problems with data processing.

More info

Next-admin library version: 6.1.6.
Nextjs version: 14.2.16.
Operating system: Windows 11
Browser: Chrome 130.0.6723.71.

[no-need-to-be-anonymous]

I have the same issue. Also, I cannot see any logs in the upload fn.

Next-admin library version: 6.1.6.
Nextjs version: 14.2.16.
Operating system: MacOS Sonoma 14.0
Browser: Chrome 130.0.6723.70

[cregourd]

Hi,

The upload function runs on the server side. You need to use it to process the uploading file and return a string (URL) that will be stored in your database and used to find the file when you display the form of the object.

When a form containing a file object is submitted, the client sends file data and information to the server, it catches this information and passes it to the upload function.

I don't quite understand your request, can you please give more details about your request to see if I'm missing something ?

[joriksp]

This is a sample NextAdminOptions code from my project:

const options: NextAdminOptions = {
   model: {
      User: {
         edit: {
            fields: {
               avatar: {
                  format: "file",
                  required: true,
                  handler: {
                     upload: async (buffer, { name, type }) => {
                        const uploadedFile = await upload(
                           new File([buffer], name)
                        );
                        return uploadedFile.url || "";
                     },
                  },
               },
            },
         },
      },
};

Here, a function inside handler.upload with the same name takes in a File and returns an object with a download reference. Here is its code:

export const upload = async (file: File) => {
   const formData = new FormData();
   formData.append("file", file);

   try {
      const response = await fetch(`${fsHost}/upload`, {
         method: "POST",
         body: formData,
      });

      if (!response.ok) {
         return {
            success: false,
            message: `Request failed, ${response.status}`,
         };
      }

      const data: UploadedFile = await response.json();

      return data;
   } catch (error) {
      return {
         success: false,
         message: `Request failed, ${error}`,
      };
   }
};

if you add any debugging (console.log('example')) to handler.upload, it will not be displayed in the console