add page router support, start doc

apps/docs/pages/docs/api/model-configuration.mdx

@@ -469,6 +469,16 @@ When you define a field, use the field's name as the key and the following objec
       description:
         "an optional string displayed in the input field as an error message in case of a failure during the upload handler",
     },
+    {
+      name: "handler.deleteFile",
+      type: "Function",
+      description: (
+        <>
+          an async function that is used to remove a file from a remote provider. Called only for multi file upload.
+          For single file deletion, use <a href="#middlewares">middlewares.delete</a> instead.
+        </>
+      )
+    },
     {
       name: "optionFormatter",
       type: "Function",
@@ -740,7 +750,7 @@ export const options: NextAdminOptions = {
   model: {
     User: {
       /**
-        ...some configuration 
+        ...some configuration
       **/
       edit: {
         display: [

apps/example/options.tsx

@@ -1,3 +1,4 @@
+import { faker } from "@faker-js/faker";
 import AddTagDialog from "@/components/PostAddTagDialogContent";
 import UserDetailsDialog from "@/components/UserDetailsDialogContent";
 import { NextAdminOptions } from "@premieroctet/next-admin";
@@ -121,7 +122,7 @@ export const options: NextAdminOptions = {
                * Make sure to return a string.
                */
               upload: async (buffer, infos, context) => {
-                return "https://raw.githubusercontent.com/premieroctet/next-admin/33fcd755a34f1ec5ad53ca8e293029528af814ca/apps/example/public/assets/logo.svg";
+                return faker.image.url({ width: 200, height: 200 });
               },
             },
           },

apps/example/package.json

@@ -20,14 +20,15 @@
     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
   },
   "dependencies": {
+    "@faker-js/faker": "^9.4.0",
     "@heroicons/react": "^2.0.18",
     "@picocss/pico": "^1.5.7",
     "@premieroctet/next-admin": "workspace:*",
     "@premieroctet/next-admin-generator-prisma": "workspace:*",
-    "next-intl": "^3.3.2",
     "@prisma/client": "5.14.0",
     "@tremor/react": "^3.2.2",
     "next": "^15.1.0",
+    "next-intl": "^3.3.2",
     "next-superjson": "^1.0.7",
     "next-superjson-plugin": "^0.6.3",
     "react": "^19.0.0",

apps/example/pageRouterOptions.tsx

@@ -1,3 +1,4 @@
+import { faker } from "@faker-js/faker";
 import { NextAdminOptions } from "@premieroctet/next-admin";
 import DatePicker from "./components/DatePicker";
 import PasswordInput from "./components/PasswordInput";
@@ -86,7 +87,7 @@ export const options: NextAdminOptions = {
                * Make sure to return a string.
                */
               upload: async (buffer, infos, context) => {
-                return "https://raw.githubusercontent.com/premieroctet/next-admin/33fcd755a34f1ec5ad53ca8e293029528af814ca/apps/example/public/assets/logo.svg";
+                return faker.image.url({ width: 200, height: 200 });
               },
             },
           },

packages/next-admin/src/components/Form.tsx

@@ -46,7 +46,7 @@ import {
   Permission,
 } from "../types";
 import { getSchemas } from "../utils/jsonSchema";
-import { formatLabel, slugify } from "../utils/tools";
+import { formatLabel, isFileUploadFormat, slugify } from "../utils/tools";
 import FormHeader from "./FormHeader";
 import ArrayField from "./inputs/ArrayField";
 import BaseInput from "./inputs/BaseInput";
@@ -527,7 +527,7 @@ const Form = ({
                   schema.properties[field as keyof typeof schema.properties];
                 const isFieldArrayOfFiles =
                   schemaProperties?.type === "array" &&
-                  schemaProperties.format === "data-url";
+                  isFileUploadFormat(schemaProperties.format ?? "");
 
                 if (isFieldArrayOfFiles) {
                   const files = formValues

packages/next-admin/src/components/inputs/FileWidget/FileItem.tsx

@@ -40,7 +40,6 @@ const FileItem = ({ file, hasError, onDelete, disabled }: Props) => {
         setIsPending(false);
       };
       image.onerror = (e) => {
-        console.error(e);
         setFileIsImage(false);
         setIsPending(false);
       };

packages/next-admin/src/components/inputs/FileWidget/FileWidget.tsx

@@ -65,7 +65,7 @@ const FileWidget = (props: Props) => {
       const newFormData = { ...old };
       if (Array.isArray(props.value)) {
         newFormData[props.name] = stateFiles.filter(
-          (_: unknown, i: number) => i !== index
+          (val: unknown, i: number) => i !== index && typeof val === "string"
         );
       } else {
         newFormData[props.name] = [null];
@@ -174,7 +174,7 @@ const FileWidget = (props: Props) => {
         {files.map((file, index) => {
           return (
             <FileItem
-              key={`${typeof file === "string" ? file : file.name}-${index}`}
+              key={`${typeof file === "string" ? file : file.name}`}
               disabled={props.disabled ?? false}
               file={file}
               hasError={!!errors}

packages/next-admin/src/utils/server.ts

@@ -24,7 +24,7 @@ import {
 } from "../types";
 import { getRawData } from "./prisma";
 import {
-  getDeletedFilesFieldName,
+  isFileUploadFormat,
   isNativeFunction,
   isUploadFile,
   pipe,
@@ -64,10 +64,6 @@ export const enumValueForEnumType = (
   return false;
 };
 
-const isFileUploadFormat = (format: string) => {
-  return ["data-url", "file"].includes(format);
-};
-
 export const getEnableToExecuteActions = async <M extends ModelName>(
   resource: M,
   prisma: PrismaClient,
@@ -435,7 +431,8 @@ export const transformData = <M extends ModelName>(
                   ]
                 : item[modelRelationIdField],
               data: {
-                modelName: deepRelationModel?.__nextadmin?.type as ModelName,
+                modelName:
+                  (deepRelationModel?.__nextadmin?.type as ModelName) ?? null,
               },
             };
           });
@@ -1024,7 +1021,6 @@ export const formattedFormData = async <M extends ModelName>(
                 editOptions,
                 property: propertyName,
               });
-              console.dir({ uploadedFiles }, { depth: null });
               formattedData[propertyName] = {
                 set: [
                   ...filteredFiles,
@@ -1366,6 +1362,10 @@ export const getFormDataValues = async (req: IncomingMessage) => {
             },
             final(callback) {
               if (file.originalFilename) {
+                if (!files[name]) {
+                  files[name] = [];
+                }
+
                 files[name].push({
                   buffer: Buffer.concat(chunks),
                   infos: {
@@ -1384,7 +1384,16 @@ export const getFormDataValues = async (req: IncomingMessage) => {
         if (err) {
           reject(err);
         }
-        resolve(files);
+        resolve({
+          ...(fields as Record<string, any>),
+          ...Object.entries(files).reduce((acc, [key, value]) => {
+            if (key in fields && Array.isArray(fields[key])) {
+              acc[key] = [...fields[key], ...value];
+            }
+
+            return acc;
+          }, files),
+        });
       });
     }
   );
@@ -1442,16 +1451,13 @@ export const getFormValuesFromFormData = async <M extends ModelName>(
             } satisfies UploadedFile;
           })
         );
-        console.log("parameters", parameters);
         formValues[key] = parameters;
       } else {
         formValues[key] = value as string;
       }
     })
   );
 
-  console.dir({ formValues }, { depth: null });
-
   return formValues;
 };
 

packages/next-admin/src/utils/tools.ts

@@ -95,3 +95,7 @@ export const getDisplayedValue = (
 
 export const getDeletedFilesFieldName = (field: string) =>
   `${field}__nextadmin_deleted`;
+
+export const isFileUploadFormat = (format: string) => {
+  return ["data-url", "file"].includes(format);
+};