Checkpoint: Solution finale pour le feedback instantané lors de l'upload d'attestations : affichage immédiat du nom du fichier sélectionné dans la boîte de dialogue dès la sélection. Le nom reste visible pendant toute la durée de l'upload avec la barre de progression. Cette approche simple et fiable résout définitivement le problème de latence en donnant un feedback visuel instantané à l'utilisateur. Déployé sur le VPS de production.

client/src/pages/AdminGestionAttestations.tsx

@@ -27,6 +27,7 @@ function UploadAttestationDialog({
 }) {
   const [uploading, setUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
+  const [selectedFileName, setSelectedFileName] = useState<string | null>(null);
   const [fileData, setFileData] = useState<{
     nomFichier: string;
     urlFichier: string;
@@ -40,6 +41,7 @@ function UploadAttestationDialog({
     if (open) {
       setUploading(false);
       setUploadProgress(0);
+      setSelectedFileName(null);
       setFileData(null);
     }
   }, [open]);
@@ -128,6 +130,11 @@ function UploadAttestationDialog({
                       <p className="text-lg font-semibold text-blue-600 mb-2">
                         Upload en cours...
                       </p>
+                      {selectedFileName && (
+                        <p className="text-sm text-gray-600 font-medium mb-3 px-4 break-all">
+                          {selectedFileName}
+                        </p>
+                      )}
                       <div className="w-full max-w-xs mx-auto">
                         <div className="flex justify-between text-sm text-gray-600 mb-2">
                           <span className="font-medium">Progression</span>
@@ -184,15 +191,20 @@ function UploadAttestationDialog({
                   const file = e.target.files?.[0];
                   if (!file) return;
 
+                  // Afficher IMMÉDIATEMENT le nom du fichier sélectionné
+                  setSelectedFileName(file.name);
+
                   // Validation du type de fichier
                   if (file.type !== 'application/pdf') {
                     toast.error('Seuls les fichiers PDF sont acceptés');
+                    setSelectedFileName(null);
                     return;
                   }
 
                   // Validation de la taille du fichier
                   if (file.size > 10 * 1024 * 1024) {
                     toast.error('Le fichier ne doit pas dépasser 10 Mo');
+                    setSelectedFileName(null);
                     return;
                   }
 

todo.md

@@ -1478,3 +1478,5 @@
 - [x] Restructurer le flux d'upload avec useEffect pour affichage immédiat
 
 - [x] Corriger la latence avec requestAnimationFrame pour affichage avant fetch bloquant
+
+- [x] Afficher immédiatement le nom du fichier sélectionné dans la boîte de dialogue