Guide pratique · IA & interfaces
7 min de lecture
Mis à jour le
Envoi de fichier : progression, validation et reprise
Définis sélection, progression fiable, contrôles serveur, droits de stockage, annulation et nouvel essai.
Réponse directe
Un parcours d’envoi relie un sélecteur de fichier natif avec label à un service de transfert, une validation serveur et un stockage contrôlé. Sépare la progression mesurée du traitement serveur, puis définis les résultats de l’annulation et du nouvel essai. L’atlas documente ce parcours ; ses composants UI ne fournissent pas de service d’envoi.
01
1. Définis la frontière du service
Un parcours d’envoi nécessite un sélecteur de fichier natif, un service de transfert, une validation serveur et un stockage contrôlé. Un bouton et une barre de progression présentent des actions et des états ; ce guide n’ajoute pas de service d’envoi à l’atlas.
Prérequis : un backend de test, les formats et tailles admis, un responsable du stockage, une politique d’accès et de nettoyage. Exemple de contrat : une pièce jointe PDF de 5 Mo maximum, privée à son propriétaire et indisponible avant la fin des contrôles. Définis ce que signifie « prêt » avant de dessiner le succès.
02
2. Rends la sélection utilisable
Propose un input type="file" avec label, consignes visibles de format et taille, et une action d’envoi distincte. Conserve l’accès natif au clavier ; le glisser-déposer peut le compléter. Affiche le nom en texte, la taille et une action explicite pour retirer ou remplacer le fichier. Fermer le sélecteur doit laisser la sélection cohérente.
L’attribut accept aide à choisir sans garantir la validité. Vérifie localement le nombre et la taille pour un retour rapide ; exclue le fichier refusé de la file d’envoi avec une correction précise. La sélection n’est pas le transfert : ne dis pas encore « envoyé ».
03
3. Sépare transfert et traitement
Définis les états sélectionné, transfert, contrôle, prêt, refusé, interrompu et annulé. Calcule un pourcentage uniquement à partir d’un total d’octets mesurable, par exemple les événements de progression avec lengthComputable. Si le total est inconnu, montre une progression indéterminée avec un texte utile plutôt qu’un pourcentage inventé.
Quand les octets ont quitté le navigateur, affiche « Vérification du fichier » jusqu’à confirmation de l’acceptation et du stockage. Nomme l’indicateur et annonce les changements d’étape utiles sans annoncer chaque mise à jour d’octets. Relie tout échec au fichier et laisse une prochaine action visible.
- Transfert : affiche les octets mesurés ou un indicateur indéterminé.
- Contrôle : attends l’acceptation serveur sans laisser croire que le fichier est déjà disponible.
- Prêt : expose la prochaine action quand l’objet stocké est accepté.
04
4. Fais respecter les règles côté serveur
Authentifie et autorise l’opération. Impose les limites de nombre et taille, une liste de formats admis et une inspection du contenu ; ne fais pas confiance au type MIME client ni au nom. Génère les noms de stockage, isole les fichiers du contenu web exécutable et applique une analyse antimalware ou une neutralisation du contenu si adaptée. Protège les endpoints authentifiés par cookie contre le CSRF.
Garde les objets non vérifiés en quarantaine et contrôle l’accès en lecture comme à l’envoi. Évite le stockage public par défaut et la journalisation inutile des noms. Définis expiration et suppression des transferts abandonnés. Ces contrôles demandent une implémentation et une vérification backend ; un message de validation UI ne prouve pas qu’un fichier est sûr.
05
5. Annule, réessaie et vérifie
L’annulation arrête la requête client active si le mécanisme le permet ; elle ne prouve pas la suppression des octets déjà stockés. Fais annuler ou expirer la session par le backend et affiche son statut final. Après interruption, conserve les métadonnées et propose un nouvel essai ; ne promets pas une reprise partielle sans protocole dédié. Un rechargement peut imposer de choisir à nouveau le fichier.
Utilise un identifiant d’opération pour résoudre les résultats incertains et éviter les objets en double. Teste un petit fichier valide, un fichier trop gros, une extension trompeuse, la perte de connexion, l’annulation et une autorisation expirée sur le backend de test. Vérifie les étapes, la reprise au clavier, un seul objet accepté et le refus d’accès depuis un autre compte. Utilise des fichiers inoffensifs ; distingue preuves backend et simulations UI.
À conserver
Preuves à conserver
- 01L’état prêt suit la validation serveur et la confirmation du stockage.
- 02Annulation et nouvel essai ont des résultats backend vérifiés.
- 03L’accès privé et les règles de refus sont testés indépendamment de l’UI.
- 04Sélection, remplacement et retrait du fichier sont accessibles au clavier seul.
- 05Un total d’octets inconnu affiche une progression indéterminée sans pourcentage inventé.
- 06Les fichiers trop gros ou au nom trompeur reçoivent un refus précis et une prochaine action.
Sources primaires
Les affirmations techniques de ce guide sont reliées aux spécifications et documentations first-party.
- File input (nouvel onglet)MDN · Référence primaire de la procédure ; les exemples et le parcours sont une rédaction originale.
- Upload events (nouvel onglet)MDN · Référence primaire de la procédure ; les exemples et le parcours sont une rédaction originale.
- File Upload Cheat Sheet (nouvel onglet)OWASP · Référence primaire de la procédure ; les exemples et le parcours sont une rédaction originale.
Continuer
Guides et outils associés
Comprendre → Reconnaître → Choisir → Comparer
Pack pour ton agent
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
Implémenter correctement
Applique « Envoi de fichier : progression, validation et reprise » pas à pas
# Applique le guide « Envoi de fichier : progression, validation et reprise » dans ton agent ## Objectif Un parcours d’envoi relie un sélecteur de fichier natif avec label à un service de transfert, une validation serveur et un stockage contrôlé. Sépare la progression mesurée du traitement serveur, puis définis les résultats de l’annulation et du nouvel essai. L’atlas documente ce parcours ; ses composants UI ne fournissent pas de service d’envoi. ## Prérequis - Inspecte le dépôt, la documentation et les conventions existantes. - Confirme que le besoin correspond au périmètre du guide : Définis sélection, progression fiable, contrôles serveur, droits de stockage, annulation et nouvel essai. - Préserve les décisions correctes déjà en place. ## Étapes du guide - 1. 1. Définis la frontière du service — Un parcours d’envoi nécessite un sélecteur de fichier natif, un service de transfert, une validation serveur et un stockage contrôlé. Un bouton et une barre de progression présentent des actions et des états ; ce guide n’ajoute pas de service d’envoi à l’atlas. - 2. 2. Rends la sélection utilisable — Propose un input type="file" avec label, consignes visibles de format et taille, et une action d’envoi distincte. Conserve l’accès natif au clavier ; le glisser-déposer peut le compléter. Affiche le nom en texte, la taille et une action explicite pour retirer ou remplacer le fichier. Fermer le sélecteur doit laisser la sélection cohérente. - 3. 3. Sépare transfert et traitement — Définis les états sélectionné, transfert, contrôle, prêt, refusé, interrompu et annulé. Calcule un pourcentage uniquement à partir d’un total d’octets mesurable, par exemple les événements de progression avec lengthComputable. Si le total est inconnu, montre une progression indéterminée avec un texte utile plutôt qu’un pourcentage inventé. - 4. 4. Fais respecter les règles côté serveur — Authentifie et autorise l’opération. Impose les limites de nombre et taille, une liste de formats admis et une inspection du contenu ; ne fais pas confiance au type MIME client ni au nom. Génère les noms de stockage, isole les fichiers du contenu web exécutable et applique une analyse antimalware ou une neutralisation du contenu si adaptée. Protège les endpoints authentifiés par cookie contre le CSRF. - 5. 5. Annule, réessaie et vérifie — L’annulation arrête la requête client active si le mécanisme le permet ; elle ne prouve pas la suppression des octets déjà stockés. Fais annuler ou expirer la session par le backend et affiche son statut final. Après interruption, conserve les métadonnées et propose un nouvel essai ; ne promets pas une reprise partielle sans protocole dédié. Un rechargement peut imposer de choisir à nouveau le fichier. ## Critères d’acceptation — Preuves à conserver - L’état prêt suit la validation serveur et la confirmation du stockage. - Annulation et nouvel essai ont des résultats backend vérifiés. - L’accès privé et les règles de refus sont testés indépendamment de l’UI. - Sélection, remplacement et retrait du fichier sont accessibles au clavier seul. - Un total d’octets inconnu affiche une progression indéterminée sans pourcentage inventé. - Les fichiers trop gros ou au nom trompeur reçoivent un refus précis et une prochaine action. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Les étapes viennent d’un guide publié et sourcé, pas d’une improvisation.
- La checklist transforme le conseil en critères vérifiables.
- Le périmètre déclaré évite d’étendre le guide au-delà de ses preuves.
À essayer ensuite
Ancre le guide dans le projet
# Ancre le guide dans le projet ## Objectif Transforme les étapes appliquées en conventions durables du dépôt. ## Contrôles - Relie chaque décision prise à l’étape du guide qui la justifie. - Ajoute la checklist aux revues concernées. - Note les cas hors périmètre pour les guides voisins. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:daddd3cf46f3b4f4162677db7a0e132eab6e46877e9b9da4a9c8d0138eed85e5
Diagnostiquer un problème
Diagnostique un écart au guide « Envoi de fichier : progression, validation et reprise »
# Diagnostique une application ratée du guide « Envoi de fichier : progression, validation et reprise » ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Rejoue les étapes dans l’ordre et note la première qui diverge : - 1. 1. Définis la frontière du service — Un parcours d’envoi nécessite un sélecteur de fichier natif, un service de transfert, une validation serveur et un stockage contrôlé. Un bouton et une barre de progression présentent des actions et des états ; ce guide n’ajoute pas de service d’envoi à l’atlas. - 2. 2. Rends la sélection utilisable — Propose un input type="file" avec label, consignes visibles de format et taille, et une action d’envoi distincte. Conserve l’accès natif au clavier ; le glisser-déposer peut le compléter. Affiche le nom en texte, la taille et une action explicite pour retirer ou remplacer le fichier. Fermer le sélecteur doit laisser la sélection cohérente. - 3. 3. Sépare transfert et traitement — Définis les états sélectionné, transfert, contrôle, prêt, refusé, interrompu et annulé. Calcule un pourcentage uniquement à partir d’un total d’octets mesurable, par exemple les événements de progression avec lengthComputable. Si le total est inconnu, montre une progression indéterminée avec un texte utile plutôt qu’un pourcentage inventé. - 4. 4. Fais respecter les règles côté serveur — Authentifie et autorise l’opération. Impose les limites de nombre et taille, une liste de formats admis et une inspection du contenu ; ne fais pas confiance au type MIME client ni au nom. Génère les noms de stockage, isole les fichiers du contenu web exécutable et applique une analyse antimalware ou une neutralisation du contenu si adaptée. Protège les endpoints authentifiés par cookie contre le CSRF. - 5. 5. Annule, réessaie et vérifie — L’annulation arrête la requête client active si le mécanisme le permet ; elle ne prouve pas la suppression des octets déjà stockés. Fais annuler ou expirer la session par le backend et affiche son statut final. Après interruption, conserve les métadonnées et propose un nouvel essai ; ne promets pas une reprise partielle sans protocole dédié. Un rechargement peut imposer de choisir à nouveau le fichier. ## Causes possibles - Une étape a été sautée ou exécutée hors ordre. - Le besoin réel sort du périmètre du guide. - Un critère de la checklist n’a jamais été vérifié. ## Corrections bornées - Reprends uniquement l’étape divergente et ce qui en dépend. - Documente l’écart si le périmètre du guide ne couvre pas le besoin. ## Vérification finale — Preuves à conserver - L’état prêt suit la validation serveur et la confirmation du stockage. - Annulation et nouvel essai ont des résultats backend vérifiés. - L’accès privé et les règles de refus sont testés indépendamment de l’UI. - Sélection, remplacement et retrait du fichier sont accessibles au clavier seul. - Un total d’octets inconnu affiche une progression indéterminée sans pourcentage inventé. - Les fichiers trop gros ou au nom trompeur reçoivent un refus précis et une prochaine action. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Le diagnostic rejoue des étapes ordonnées au lieu de chercher au hasard.
- Les corrections restent bornées à la première divergence réelle.
- La checklist sert de vérification finale reproductible.
À essayer ensuite
Préviens la prochaine dérive
# Préviens la prochaine dérive ## Objectif Fais de la première étape divergente un contrôle explicite du projet. ## Contrôles - Ajoute un contrôle ciblé sur l’étape qui a divergé. - Vérifie la checklist sur un second cas réel. - Documente la limite de périmètre rencontrée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:bd4f2cc9944f7e20a9c9006da2aa3db659895b3c1a340bdf3bfc73a15886a751
Digest du Pack: sha256:acd8e91e8bc02f0cf4271bbac7d384cb9dea571b13edfbd1930e082b68849cc1