Durant le développement de ma première application fullstack avec React (JavaScript « natif » d’abord puis TypeScript) et FastApi , j’ai été amené à créer un composant d’upload de fichier image.

Principe de fonctionnement

Ce composant est prévu pour être utilisé comme « champ » d’un formulaire, et utilise des données formattées comme suit :

{
   mode: 'current' | 'delete' | 'new', // utilisé côté back
   currentUrl: 'user-profile.png',
   file: objet File()
}

Au niveau visuel, d’un côté on affiche l’image actuelle ou celle par défaut ou la nouvelle image, de l’autre, des boutons radio permettant de soit garder l’image actuelle, soit l’effacer (et la remplacer par l’image par défaut), soit la remplacer.

Chacune des images mentionnées ci-dessus est affichée dans sa propre balise et est masquée ou affichée celon le besoin.