Forma ideal de enviar un archivo a un servicio

El estado del arte en la Ingeniería de datos y los algoritmos estadísticos nos abren la posibilidad de automatizar ciertas tareas. Extraer información de un archivo es vital para realizar un modelo de inteligencia artificial o simplemente para concluir inferencias estadísticas a través de algoritmos. Los tipos de archivos mas comunes para dichos análisis son los .csv .xlsx(Excel). Los archivos CSV sirven para manejar una gran cantidad de datos en formato tabla, sin que ello conlleve sobrecoste computacional alguno. Es tremendamente sencillo generar una tabla a partir de un documento de texto, con tan solo delimitar cada celda requerida con un punto y coma (en el caso de Europa) o con una coma (en países de habla inglesa). (Navegación, 2020).

Adicionalmente, para un cliente, es más fácil que entregue sus datos en formato Excel, ya que Excel es una de la herramienta más utilizada en el ámbito laboral, pues facilita muchos procesos administrativos. Y no solo eso, también permite realizar tareas en muy corto tiempo, automatizar tareas repetitivas y evitar errores que a veces pueden costar grandes sumas de dinero. (Ampliar, 2013). De ahí la importancia de procesar archivos, independientemente del formato.

Suponiendo que estamos creando un sitio web para un usuario final, y que un requisito funcional sea carga de archivos desde una interfaz gráfica, veremos un pequeño ejemplo sobre cómo lograr dicho requisito del lado del cliente (Frontend) y posteriormente enviarlo a un servicio.

¿Qué es FormData?

FormData es simplemente una estructura de datos que se puede utilizar para almacenar pares clave-valor. Tal como sugiere su nombre, está diseñado para contener datos de formularios, es decir, puede usarlo con JavaScript para crear un objeto que corresponda a un formulario HTML. Es principalmente útil cuando necesita enviar datos de formulario a puntos finales de la API RESTful, por ejemplo, para cargar uno o varios archivos mediante la interfaz XMLHttpRequest, la API fetch() o Axios. (Bouchefra, 2019). Al venir por defecto en Javascript, es posible crear este tipo de objeto en cualquier Framework de frontend:

1. Primero se debe crear la etiqueta input de HTML. Se debe indicar que el “type” es archivo “file” y el atributo “accept” es opcional, para indicar la extensión del archivo. Por último, asignarle un identificador “id”, para acceder al elemento más adelante de forma dinámica.

2. Después, vamos a acceder al elemento HTML y creamos una petición. La petición debe ser POST y para que funcione correctamente el tipo de contenido de la petición es multipart/form-data. Aunque el objeto FormData, configura el encabezado implícitamente, es importante tenerlo en cuenta, ya que el archivo se envía en formato binario y en ese mismo formato llega al servicio:

Se crea un 1 evento:

• addEventListener de tipo ‘change’, para que el elemento input creado con anterioridad esté a la espera de que el usuario seleccione un archivo. Con la propiedad files del event se accede a todos los archivos seleccionados por el usuario.

Se crea una función:

• uploadFile que recibe el archivo como parámetro y se encargará de enviarlo al servicio.

Se crean 3 variables:

• API_ENDPOINT. Hace referencia al punto funcional, URL del servicio que recibe el archivo
• Permite realizar peticiones HTTP cliente-servidor, este tipo de objeto puede cambiar dependiendo del Framework. Por ejemplo, en Angular la clase utilizada para peticiones HTTP es HttpClient.
• Hace referencia al objeto FormData, implementado también en cualquier Framework que se desee utilizar, que esté basado en JavaScript/TypeScript.

Se define la petición con el método open de request. Con el método onreadystatechange se define qué hacer con la respuesta del servicio. Con append, se adiciona el archivo al FormData, el cual recibe dos parámetros, la llave y el valor. Además, se puede adicionar más información tipo llave-valor en el FormData si así se desea.

Finalmente, send ejecuta la petición.

2

Y así, con pocas líneas de código, pudimos enviar un archivo por la web para ser procesado por un servicio de inteligencia artificial o algoritmos estadísticos.

Referencias

1. Navegación. (2020, June 29). GEEKNETIC. https://www.geeknetic.es/Archivo-CSV/que-es-y-para-que-sirve
2. Ampliar. (2013). Excelparatodos.com. https://excelparatodos.com/que-es-excel/#:~:text=Excel%20es%20una%20de%20las%20herramienta%20m%C3%A1s%20utilizada%20en%20el,costar%20grandes%20sumas%20de%20dinero.
3. ‌ Bouchefra, A. (2019, July 21). How to upload single or multiple files the easy way with FormData. FreeCodeCamp.org; freeCodeCamp.org. https://www.freecodecamp.org/news/formdata-explained/