# HG changeset patch # User Arnaud Vergnet <arnaud.vergnet@logilab.fr> # Date 1713171983 -7200 # Mon Apr 15 11:06:23 2024 +0200 # Node ID becd6c98919b57ef40a8e006304cb424c98e7d12 # Parent 524d4a50ec3cb41694c7f160a278fdc83b46790d chore(frontend): improve file upload input semantics 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 @@ -48,40 +48,40 @@ const filePresent = value?.downloadUrl || value?.data; return ( - <> - <input - type="file" - style={{ display: "none" }} - ref={ref} - onChange={onFileChange} - /> - <ButtonGroup variant={filePresent ? "outlined" : "text"}> + <ButtonGroup variant={filePresent ? "outlined" : "text"}> + <Button + fullWidth + startIcon={<FileUploadIcon />} + disabled={disabled} + onClick={chooseFile} + component="label" + role={undefined} + > + {label} + {filePresent + ? ` (${getFileName()}): Modifier le fichier` + : " : Choisir un fichier"} + <input + type="file" + style={{ display: "none" }} + ref={ref} + onChange={onFileChange} + /> + </Button> + <ButtonTooltip + title={ + filePresent ? "Télécharger le fichier" : "Aucun fichier en ligne" + } + > <Button - fullWidth - startIcon={<FileUploadIcon />} - disabled={disabled} - onClick={chooseFile} + startIcon={<Visibility />} + disabled={disabled || !filePresent} + href={getFileDownloadUrl(value)} + download={getFileName()} > - {label} - {filePresent - ? ` (${getFileName()}): Modifier le fichier` - : " : Choisir un fichier"} + Voir </Button> - <ButtonTooltip - title={ - filePresent ? "Télécharger le fichier" : "Aucun fichier en ligne" - } - > - <Button - startIcon={<Visibility />} - disabled={disabled || !filePresent} - href={getFileDownloadUrl(value)} - download={getFileName()} - > - Voir - </Button> - </ButtonTooltip> - </ButtonGroup> - </> + </ButtonTooltip> + </ButtonGroup> ); }