# HG changeset patch
# User Fabien Amarger <fabien.amarger@logilab.fr>
# Date 1711553035 -3600
#      Wed Mar 27 16:23:55 2024 +0100
# Node ID 35bceb8037fa9c06b854f835ecd840a081a93bdd
# Parent  6a3df8d582f34b8a47aba1d7f9448135db0d73a2
feat(frontend): Render filename on FileField

diff --git a/frontend/src/components/FileField.tsx b/frontend/src/components/FileField.tsx
--- a/frontend/src/components/FileField.tsx
+++ b/frontend/src/components/FileField.tsx
@@ -3,7 +3,7 @@
 import Visibility from "@mui/icons-material/Visibility";
 import { ChangeEventHandler, useRef } from "react";
 import { CWFile } from "@/types";
-import { downloadFile, openFile } from "@/utils";
+import { downloadFile, getFileNameFromURL, openFile } from "@/utils";
 import { ButtonTooltip } from "./ButtonTooltip";
 
 interface FileFieldProps {
@@ -67,7 +67,10 @@
           disabled={disabled}
           onClick={chooseFile}
         >
-          {label}: {filePresent ? "Modifier le fichier" : "Choisir un fichier"}
+          {label}
+          {filePresent
+            ? ` ${getFileName()}: Modifier le fichier`
+            : " : Choisir un fichier"}
         </Button>
         <ButtonTooltip
           title={
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -13,3 +13,7 @@
   });
   return await response.blob();
 }
+
+export function getFileNameFromURL(url: string): string {
+  return url.slice(url.lastIndexOf("/") + 1);
+}