Fix image (#472)

.changeset/witty-snakes-shout.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Fix image (get async)

apps/example/options.tsx

@@ -1,5 +1,5 @@
-import UserDetailsDialog from "@/components/UserDetailsDialogContent";
 import AddTagDialog from "@/components/PostAddTagDialogContent";
+import UserDetailsDialog from "@/components/UserDetailsDialogContent";
 import { NextAdminOptions } from "@premieroctet/next-admin";
 import DatePicker from "./components/DatePicker";
 import PasswordInput from "./components/PasswordInput";

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

@@ -9,12 +9,12 @@ import { ChangeEvent, useEffect, useRef, useState } from "react";
 import Loader from "../../assets/icons/Loader";
 import { useFormState } from "../../context/FormStateContext";
 import { useI18n } from "../../context/I18nContext";
-import { getFilenameFromUrl, isImageType } from "../../utils/file";
+import { getFilenameFromUrl } from "../../utils/file";
 
 const FileWidget = (props: WidgetProps) => {
   const [file, setFile] = useState<File>();
   const [errors, setErrors] = useState(props.rawErrors);
-  const [fileIsImage, setFileIsImage] = useState(false);
+  const [fileIsImage, setFileIsImage] = useState(true);
   const [filename, setFilename] = useState<string | null>(null);
   const [fileUrl, setFileUrl] = useState<string | null>(props.value);
   const [isPending, setIsPending] = useState(false);
@@ -35,12 +35,22 @@ const FileWidget = (props: WidgetProps) => {
   useEffect(() => {
     if (props.value) {
       setIsPending(true);
-      setFileUrl(props.value);
+
+      const image = document.createElement("img");
+      image.src = props.value as string;
+      image.onload = () => {
+        setFileIsImage(true);
+        setIsPending(false);
+      };
+      image.onerror = (e) => {
+        console.error(e);
+        setFileIsImage(false);
+        setIsPending(false);
+      };
       const filename = getFilenameFromUrl(props.value);
       if (filename) {
         setFilename(filename);
       }
-      setFileIsImage(isImageType(props.value));
       setIsPending(false);
     } else {
       setIsPending(false);

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

@@ -317,7 +317,8 @@ export const transformData = <M extends ModelName>(
   const model = models.find((model) => model.name === modelName);
   if (!model) return data;
 
-  return Object.keys(data).reduce((acc, key) => {
+  return Object.keys(data).reduce(async (accP, key) => {
+    const acc = await accP;
     const field = model.fields?.find((field) => field.name === key);
     const fieldKind = field?.kind;
     const get = editOptions?.fields?.[key as Field<M>]?.handler?.get;
@@ -326,7 +327,7 @@ export const transformData = <M extends ModelName>(
       editOptions?.fields?.[key as Field<M>]?.relationshipSearchField;
 
     if (get) {
-      acc[key] = get(data[key]);
+      acc[key] = await get(data[key]);
     } else if (fieldKind === "enum") {
       const value = data[key];
       if (Array.isArray(value)) {
@@ -414,7 +415,7 @@ export const transformData = <M extends ModelName>(
       }
     }
     return acc;
-  }, {} as any);
+  }, Promise.resolve({}) as any);
 };
 
 /**