Merida Design Blog

Publicado el | Snippets / ,

Peticiones AJAX con envío de archivos usando JS puro, jQuery y AngularJS

Las aplicaciones modernas en su mayoría son SPA’s (Single Page Application), es decir, aplicaciones de una sola página cuyo contenido debe ser leído y enviado a través de AJAX para evitar la recarga del navegador.

Aunque el uso de AJAX ya es bastante común y se puede encontrar información en muchas partes, algo que tal vez no esté tan documentado es el envío de archivos en una petición post. Es por eso que en esta ocasión quiero compartir contigo 3 distintas formas de hacerlo usando las librerías mas comunes.


Formato y cabecera

Las principales características que debe contener la petición son:

  • La información debe enviarse como un objeto FormData.
  • Especificar en las cabeceras que es un formulario y no un objeto de json o texto plano.

Actualización: No es necesario especificar en la cabecera el Content-Type, ya que al definir el objeto FormData, la cabecera se convierte automáticamente en multipart/form-data.
Corregido gracias a la observación de Alexys Lozada.


Javascript Puro

var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    var request = new XMLHttpRequest();
    request.open('POST', 'http://tupagina.com', true);
    request.send(new FormData(e.target));
});

jQuery

$('form').on('submit', function(e) {
    e.preventDefault();
    
    $.ajax({
        url: 'http://tupagina.com',
        type: 'POST',
        data: new FormData(e.target),
        processData: false
    });
});

Especificar el processData como falso evita que jQuery intente procesar el cuerpo de la petición y la convierta en json.


AngularJS

// Dentro de un controlador
vm = this;
vm.data = { ... };

vm.submit = function($event) {
    $event.preventDefault();

    $http.post('http://tupagina.com', vm.data, {
        headers: { 'Content-Type': undefined },
        transformRequest: function(data) {
            if (undefined === data) return data;
            
            var formData = new FormData();
            
            angular.forEach(data, function(value, key) {
                if (value instanceof FileList) {
                    formData.append(key, value[0]);
                } else {
                    formData.append(key, value);
                }
            });
            
            return formData;
        }
    });
}

Si quieres ver ejemplos mas completos de esta técnica con AngularJS puedes consultar los artículos:


Conclusión

Existen otras librerías y API‘s que también permiten hacer llamadas AJAX como Fetch o Axios, pero para cualquiera de ellas la sintaxis será similar a las tres que te presento, además de ser las que considero más comunes.

Si quieres ver mas ejemplos o códigos para realizar alguna acción específica, no dudes en dejar tus sugerencias en los comentarios.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: