{"id":10330,"date":"2018-08-17T09:10:14","date_gmt":"2018-08-17T14:10:14","guid":{"rendered":"http:\/\/carterembry.com\/\/?p=10330"},"modified":"2025-08-05T09:05:23","modified_gmt":"2025-08-05T14:05:23","slug":"creating-flexible-and-reusable-react-file-uploaders","status":"publish","type":"post","link":"https:\/\/carterembry.com\/fr\/2018\/creating-flexible-and-reusable-react-file-uploaders\/%20","title":{"rendered":"Cr\u00e9er des t\u00e9l\u00e9chargeurs de fichiers React flexibles et r\u00e9utilisables"},"content":{"rendered":"
\n
\n\t

Daniel a r\u00e9cemment fait l'objet d'un article sur le blog d'ing\u00e9nierie d'Eventbrite et nous sommes tr\u00e8s fiers du travail qu'il y accomplit.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

\n
\n\t\t\t\n\t\t\t\"\"\n\t\t\t<\/a><\/div>\n\n<\/div><\/div><\/div>
\n
\n\t

L'\u00e9quipe de cr\u00e9ation d'\u00e9v\u00e9nements chez Eventbrite avait besoin d'un t\u00e9l\u00e9chargeur d'images bas\u00e9 sur React qui offrirait de la flexibilit\u00e9 tout en pr\u00e9sentant une interface utilisateur simple. Les composants de l'uploader d'images devraient fonctionner dans une vari\u00e9t\u00e9 de sc\u00e9narios en tant que parties r\u00e9utilisables qui pourraient \u00eatre compos\u00e9es diff\u00e9remment selon les besoins. Lis la suite pour voir comment nous avons r\u00e9solu ce probl\u00e8me.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

Qu'est-ce qu'un t\u00e9l\u00e9chargeur de fichiers ?<\/h3>\n
\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n
\n\t

Dans le pass\u00e9, si tu voulais obtenir un fichier de tes utilisateurs web, tu devais utiliser un\u00a0\"Type d'entr\u00e9e \"fichier<\/a>. Cette approche \u00e9tait limit\u00e9e \u00e0 bien des \u00e9gards, notamment en ce qu'elle ne permettait pas d'atteindre les objectifs fix\u00e9s.\u00a0c'est une entr\u00e9e<\/i>: les donn\u00e9es ne sont transmises que lorsque tu soumets le formulaire, les utilisateurs n'ont donc pas la possibilit\u00e9 de voir les commentaires avant ou pendant le t\u00e9l\u00e9chargement.<\/p>\n

En gardant cela \u00e0 l'esprit, les t\u00e9l\u00e9chargeurs React dont nous allons parler ne sont pas des entr\u00e9es de formulaire ; ce sont des \" outils de transport imm\u00e9diat. \" L'utilisateur choisit un fichier, l'uploader le transporte vers un serveur distant, puis re\u00e7oit une r\u00e9ponse avec un certain identifiant unique. Cet identifiant est alors imm\u00e9diatement associ\u00e9 \u00e0 un enregistrement de base de donn\u00e9es ou plac\u00e9 dans un champ de formulaire cach\u00e9.<\/p>\n<\/div>\n<\/div><\/div><\/div>

\n
\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t<\/video>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n
\n\t

Cette nouvelle strat\u00e9gie offre une grande flexibilit\u00e9 par rapport aux processus de t\u00e9l\u00e9chargement traditionnels. Par exemple, le fait de dissocier le transport de fichiers des soumissions de formulaires nous permet de\u00a0t\u00e9l\u00e9charger directement vers un espace de stockage tiers (comme Amazon S3) sans envoyer les fichiers via nos serveurs.<\/strong>.<\/p>\n

La contrepartie de cette flexibilit\u00e9 est la complexit\u00e9 ; les t\u00e9l\u00e9chargeurs de fichiers par glisser-d\u00e9poser sont des b\u00eates complexes. Nous avions \u00e9galement besoin que notre t\u00e9l\u00e9chargeur React soit simple et utilisable. Trouver un chemin pour offrir \u00e0 la fois flexibilit\u00e9 et facilit\u00e9 d'utilisation n'a pas \u00e9t\u00e9 une t\u00e2che facile.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

Identifier les responsabilit\u00e9s<\/h3>\n
\n\t

\u00c9tablir les responsabilit\u00e9s d'un t\u00e9l\u00e9chargeur semble facile... il t\u00e9l\u00e9charge, n'est-ce pas ? Bien s\u00fbr, mais il y a beaucoup d'autres choses \u00e0 faire pour que cela se produise :<\/p>\n