{"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\/es\/2018\/creating-flexible-and-reusable-react-file-uploaders\/%20","title":{"rendered":"Creaci\u00f3n de cargadores de archivos React flexibles y reutilizables"},"content":{"rendered":"
\n
\n\t

Daniel apareci\u00f3 recientemente en el blog Eventbrite Engineering y estamos muy orgullosos del trabajo que hace all\u00ed.<\/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

El equipo de Creaci\u00f3n de Eventos de Eventbrite necesitaba un cargador de im\u00e1genes basado en React que proporcionara flexibilidad a la vez que presentara una interfaz de usuario sencilla. Los componentes del cargador de im\u00e1genes deb\u00edan funcionar en diversos escenarios como partes reutilizables que pudieran componerse de forma diferente seg\u00fan las necesidades. Sigue leyendo para ver c\u00f3mo resolvimos este problema.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

\u00bfQu\u00e9 es un cargador de archivos?<\/h3>\n
\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n
\n\t

Antes, si quer\u00edas obtener un archivo de tus usuarios web, ten\u00edas que utilizar un\u00a0\"tipo de entrada \"archivo<\/a>. Este planteamiento era limitado en muchos aspectos, sobre todo en que\u00a0es una entrada<\/i>: los datos s\u00f3lo se transmiten cuando env\u00edas el formulario, por lo que los usuarios no tienen la oportunidad de ver los comentarios antes o durante la carga.<\/p>\n

Teniendo esto en cuenta, los uploaders de React de los que hablaremos no son entradas de formulario; son \"herramientas de transporte inmediato\". El usuario elige un archivo, el cargador lo transporta a un servidor remoto, y luego recibe una respuesta con alg\u00fan identificador \u00fanico. Ese identificador se asocia inmediatamente a un registro de la base de datos o se introduce en un campo oculto del formulario.<\/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

Esta nueva estrategia proporciona una enorme flexibilidad respecto a los procesos de carga tradicionales. Por ejemplo, desacoplar el transporte de archivos del env\u00edo de formularios nos permite\u00a0subir directamente al almacenamiento de terceros (como Amazon S3) sin enviar los archivos a trav\u00e9s de nuestros servidores<\/strong>.<\/p>\n

La contrapartida de esta flexibilidad es la complejidad; los cargadores de archivos de arrastrar y soltar son bestias complejas. Tambi\u00e9n necesit\u00e1bamos que nuestro cargador React fuera sencillo y f\u00e1cil de usar. Encontrar un camino que proporcionara tanto flexibilidad como facilidad de uso no fue tarea f\u00e1cil.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div>

Identificar responsabilidades<\/h3>\n
\n\t

Establecer las responsabilidades de un uploader parece f\u00e1cil... se sube, \u00bfno? Pues claro, pero hay muchas otras cosas implicadas para que eso ocurra:<\/p>\n