Cómo cargar uno o varios archivos de forma sencilla con FormData

Programación

En esta publicación, aprenderemos sobre la interfaz FormData disponible en los navegadores web modernos como parte de la especificación HTML5.

Veremos ejemplos del uso de FormData con Ajax, Angular 7, Ionic y React.

¿Qué es FormData?

FormData es simplemente una estructura de datos que se puede utilizar para almacenar pares clave-valor. 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 sobre todo útil cuando necesita enviar datos de formulario a puntos finales de la API RESTful, por ejemplo, para cargar uno o varios archivos utilizando la XMLHttpRequestinterfaz, la fetch()API o Axios.

Puede crear un objeto FormData creando una instancia de la interfaz FormData utilizando el newoperador de la siguiente manera:

const formData = new FormData()

La formDatareferencia se refiere a una instancia de FormData. Puede llamar a muchos métodos en el objeto para agregar y trabajar con pares de datos. Cada par tiene una clave y un valor.

Estos son los métodos disponibles en los objetos FormData:

  • append(): se utiliza para agregar un par clave-valor al objeto. Si la clave ya existe, el valor se agrega al valor original de esa clave,
  • delete(): se usa para eliminar un par clave-valor,
  • entries(): devuelve un objeto Iterator que puede utilizar para recorrer la lista de pares clave-valor en el objeto,
  • get(): utilizado para devolver el valor de una clave. Si se agregan varios valores, devuelve el primer valor,
  • getAll(): utilizado para devolver todos los valores de una clave especificada,
  • has(): utilizado para comprobar si hay una llave,
  • keys(): devuelve un objeto Iterador que puede utilizar para enumerar las claves disponibles en el objeto,
  • set(): se usa para agregar un valor al objeto, con la clave especificada. Esto va a relacionar el valor si ya existe una clave,
  • values(): devuelve un objeto Iterator para los valores del objeto FormData.

Ejemplo de carga de archivos con Vanilla JavaScript

Veamos ahora un ejemplo simple de carga de archivos usando JavaScript vanilla XMLHttpRequesty FormData.

Navegue a su carpeta de trabajo y cree un index.htmlarchivo con el siguiente contenido:

   Parcel Sandbox

Simplemente creamos un documento HTML con un identificado por el appID. A continuación, incluimos el index.jsarchivo mediante una etiqueta.

A continuación, cree el index.jsarchivo y agregue el siguiente código:

document.getElementById("app").innerHTML = ` 
File Upload & FormData Example
 `; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });

Primero insertamos un elemento en nuestra página HTML. Esto se utilizará para seleccionar el archivo que cargaremos.

A continuación, consultamos el elemento de entrada del archivo utilizando el querySelector()método.

A continuación, definimos el uploadFile()método en el que primero declaramos una   API_ENDPOINTvariable que contiene la dirección de nuestro punto final de carga de archivos. A continuación, creamos una XMLHttpRequestsolicitud y un FormDataobjeto vacío .

Usamos el método append de FormData para agregar el archivo, pasado como parámetro al uploadFile()método, a la fileclave. Esto creará un par clave-valor con filecomo clave y el contenido del archivo pasado como valor.

A continuación, enviamos la solicitud utilizando el send()método de XMLHttpRequesty pasamos el FormDataobjeto como argumento.

Después de definir el uploadFile()método, escuchamos el evento de cambio en el elemento y llamamos al   uploadFile()método con el archivo seleccionado como argumento. Se accede al archivo desde la event.target.filesmatriz.

Puede experimentar con este ejemplo de este código sandbox:

Carga de varios archivos

Puede modificar fácilmente el código anterior para admitir la carga de varios archivos.

Primero, debe agregar la multiplepropiedad al elemento:

Ahora, podrá seleccionar varios archivos de su unidad.

A continuación, cambie el uploadFile()método para aceptar una matriz de archivos como argumento y simplemente recorra la matriz y agregue los archivos al FormDataobjeto:

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); };

Finalmente, llame al método con una matriz de archivos como argumento:

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); });

A continuación, puede consultar estos tutoriales avanzados sobre cómo usar FormDatacon Angular, Ionic y React:

  • Cómo publicar FormData con Angular 7
  • React y Axios FormData
  • Carga de varios archivos con Ionic 4 y FormData