From 104aabac89f31718f8e07e0807447b9a3aeaf57a Mon Sep 17 00:00:00 2001
From: Hugo FOYART <11079152+foyarash@users.noreply.github.com>
Date: Mon, 11 Mar 2024 15:52:34 +0100
Subject: [PATCH] fix: image display in file input field #154 (#167)

* fix: image display in file input field #154

* changeset as patch
---
 .changeset/plenty-knives-pull.md              |  5 +++
 .../src/components/inputs/FileWidget.tsx      | 31 ++++++++++---------
 2 files changed, 21 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/plenty-knives-pull.md

diff --git a/.changeset/plenty-knives-pull.md b/.changeset/plenty-knives-pull.md
new file mode 100644
index 00000000..eaa156e6
--- /dev/null
+++ b/.changeset/plenty-knives-pull.md
@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+fix: image display in file input field ([#154](https://github.com/premieroctet/next-admin/issues/154))
diff --git a/packages/next-admin/src/components/inputs/FileWidget.tsx b/packages/next-admin/src/components/inputs/FileWidget.tsx
index fc665a31..8ab65c23 100644
--- a/packages/next-admin/src/components/inputs/FileWidget.tsx
+++ b/packages/next-admin/src/components/inputs/FileWidget.tsx
@@ -45,18 +45,25 @@ const FileWidget = (props: WidgetProps) => {
     }
   };
 
-  const getFileType = async (signal: AbortSignal) => {
+  const getFileType = () => {
     if (!props.value) {
       return;
     }
+
     try {
-      const response = await fetch(props.value, {
-        signal,
-      });
-      setFileIsImage(
-        response.headers.get("Content-Type")?.includes("image") ?? false
-      );
-      setFileImage(props.value);
+      const img = new Image();
+
+      img.onload = () => {
+        setFileIsImage(true);
+        setFileImage(props.value);
+      };
+
+      img.onerror = () => {
+        setFileIsImage(false);
+        setFileImage(props.value);
+      };
+
+      img.src = props.value as string;
     } catch (error) {
       setFileIsImage(false);
     }
@@ -70,13 +77,7 @@ const FileWidget = (props: WidgetProps) => {
   };
 
   useEffect(() => {
-    const abortController = new AbortController();
-
-    getFileType(abortController.signal);
-
-    return () => {
-      abortController.abort();
-    };
+    getFileType();
   }, []);
 
   let isLink = false;