Comment permettre à un utilisateur d’uploader plusieurs photos sur son profil avec FlutterFlow + Firebase

Permettre aux utilisateurs de gérer plusieurs photos sur leur profil est une fonctionnalité clé dans de nombreuses applications modernes : réseaux sociaux, marketplaces, portfolios, etc.

Dans ce tutoriel complet, on va voir comment mettre en place cette fonctionnalité avec FlutterFlow et Firebase, étape par étape.

---

Pourquoi ne pas se contenter d’un seul champ image ?

Souvent, on voit des projets où l’image de profil est simplement enregistrée en tant que champ dans le document utilisateur (photoURL). C’est suffisant… si tu ne gères qu’une seule image.

Mais dès que tu veux permettre l’ajout, la suppression ou l’affichage de plusieurs images, il faut passer à un modèle plus robuste :

✅ Créer une sous-collection
✅ Enregistrer chaque image comme un document indépendant
✅ Associer ces documents à l’utilisateur via des références

---

Ce qu’on va construire

• Un composant qui affiche une photo avec un bouton de suppression
• Une GridView qui liste toutes les photos de l’utilisateur
• Un bouton d’upload qui ajoute une image dans Firebase Storage + Firestore
• Une logique pour supprimer proprement la photo de Firebase

---

1. Créer le composant d’affichage photo

Dans FlutterFlow, on commence par créer un Component UserPhoto.

Contenu du component :

• Un Container avec une hauteur fixe
• Un Stack pour superposer l’image et l’icône de suppression
• Une Image (remplissant tout le container)
• Un bouton en forme de poubelle positionné en haut à droite

Best practice : utiliser un composant réutilisable évite de dupliquer le code sur chaque page.

---

2. Mettre en place la base de données

Dans Firestore :

• Crée une sous-collection MyPhoto sous le document utilisateur
• Chaque document représente une photo
• Champs conseillés :
  • imagePath (type : image)
  • createdAt (optionnel)
  • isVisible (optionnel)

Pourquoi une sous-collection ?
Parce qu’une photo n’a pas de raison d’exister sans utilisateur. Cela garantit une structure propre et facilite les requêtes ciblées.

---

3. Afficher les photos de l’utilisateur

Sur la page FlutterFlow :

• Ajoute une GridView
• Utilise une backend query pour charger les documents MyPhoto liés à l’utilisateur connecté
• Passe la photoURL ou document en paramètre au component UserPhoto

Le résultat : un affichage propre de toutes les photos du user.

---

4. Uploader une nouvelle photo

Ajouter un bouton avec l’action suivante :

1. UploadMediaToFirebase → l’image est envoyée dans le Storage
2. CreateDocument → un document est créé dans la sous-collection MyPhoto, avec l’URL de l’image et la userReference

💡 Pense à afficher une Snackbar ou loader pour prévenir l’utilisateur pendant l’upload.

---

5. Supprimer une photo

Sur le bouton poubelle du component UserPhoto, on configure deux actions :

1. Delete File from Firebase Storage (à partir du champ photoURL)
2. Delete Document (le document Firestore lié à cette photo)

Important : supprime toujours les fichiers du Storage pour éviter de surcharger inutilement ton quota Firebase.

---

Résultat final

Avec ce setup :

• Chaque utilisateur peut ajouter, afficher et supprimer ses photos
• La structure est scalable et respecte les bonnes pratiques Firebase
• Tu peux facilement rajouter des filtres, dates, visibilités, etc.

Envie d’aller plus loin ?

Je suis Franco, Product Builder & Formateur.
J’aide les porteurs de projets à construire leur app mobile de A à Z sans coder.

Tu as un projet ? 💬
Écris-moi pour qu’on discute ensemble de ton idée !