angularjs

Enviar varios archivos a PHP con AngularJS y FormData

Introducción

Siguiendo con los tutoriales de enviar o cargar archivos a un servidor usando AJAX veamos hoy cómo podemos subir múltiples archivos a PHP usando FormData y el framework AngularJS.

Para esto usaremos el servicio de $http combinado con FormData.

Vista, controlador y petición con AngularJS y $http

Será  un input en donde se podrán seleccionar varios archivos (para que esto suceda ponemos la propiedad multiple).

También se podrá enviar una cadena para que veamos que no únicamente podemos enviar archivos. De esta forma podremos enviar un formulario completo, sin importar si tiene archivos o cadenas y números.

Entonces definimos el controlador de AngularJS, escuchamos el click del botón con ng-click y llamamos al método enviarFormulario.

<!DOCTYPE html>
<html lang="es">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Subida de múltiples archivos con AngularJS y FormData</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
 
<body ng-app="app">
    <div ng-controller="principal">
        <input id="archivos" multiple type="file">
        <br><br>
        <input ng-model="nombre" type="text" placeholder="Tu nombre">
        <button ng-click="enviarFormulario()">Enviar</button>
    </div>
    <script>
        /**
            Envío de múltiples archivos y datos
            a PHP desde AngularJS usando FormData y $http
 
            @author parzibyte
            parzibyte.me/blog
        */        angular.module("app", [])
            .controller("principal", ["$scope", "$http", function ($scope, $http) {
                const $archivos = document.querySelector("#archivos");
                $scope.enviarFormulario = function () {
                    let archivos = $archivos.files;
                    if (archivos.length > 0 && $scope.nombre) {
 
                        let formdata = new FormData();
 
                        // Agregar cada archivo al formdata
                        angular.forEach(archivos, function (archivo) {
                            formdata.append(archivo.name, archivo);
                        });
 
                        // Finalmente agregamos el nombre
                        formdata.append("nombre", $scope.nombre);
 
                        // Hora de enviarlo
 
                        // Primero la configuración
                        let configuracion = {
                            headers: {
                                "Content-Type": undefined,
                            },
                            transformRequest: angular.identity,
                        };
                        // Ahora sí
                        $http
                            .post("./guardar_archivos.php", formdata, configuracion)
                            .then(function (respuesta) {
                                console.log("Después de enviar los archivos, el servidor dice:", respuesta.data);
                            })
                            .catch(function (detallesDelError) {
                                console.warn("Error al enviar archivos:", detallesDelError);
                            })
                    } else {
                        alert("Rellena el formulario y selecciona algunos archivos");
                    }
                };
            }]);
    </script>
</body>
 
</html>

El script es muy sencillo. Validamos que el usuario haya seleccionado archivos y que haya rellenado el campo del nombre.

Por cierto, el input de tipo file no puede ser ligado con ng-model así de fácil, por lo que debemos recurrir a otros métodos.

Para ello usamos querySelector, de esa manera obtenemos una referencia al elemento en sí.

Lo demás es agregar cada archivo a nuestra variable de tipo FormData. Usamos $http.post para hacer una petición POST con AngularJS y actuamos dependiendo de la respuesta de la promesa.

Por cierto, debemos incluir la configuración así como se indica para que el formulario y los archivos sean mandados con éxito.

Lado del servidor

Todos los archivos están en $_FILES y todo aquello que no es archivo y agregamos a nuestro objeto de tipo FormData está en $_POST.

Podemos iterar sobre $_FILES e ir guardando el archivo, como vimos en este tutorial.

Para obtener el nombre, accedemos a $_POST["nombre"], pues esa fue la clave con la que agregamos el dato a nuestro formData en el método append.

El código queda así:

<?php
/**
    Envío de múltiples archivos y datos
    a PHP desde AngularJS usando FormData y $http
 
    @author parzibyte
    parzibyte.me/blog
*/ 
// Los archivos en $_FILES y lo demás en $_POST
$nombre = $_POST["nombre"];
 
// Aquí podemos hacer lo que sea con $nombre
 
foreach ($_FILES as $archivo) {
    move_uploaded_file($archivo["tmp_name"], $archivo["name"]);
}
 
# La respuesta que recibe $http.post en el then de la promesa
echo true;

Lo que hace ese código es recorrer los archivos e ir guardándolos en el mismo directorio. Recordemos que no aplicamos nada de seguridad, pero se me ocurre que podríamos renombrar los archivos antes de guardarlos.

Conclusión y apuntes

Así podemos enviar archivos múltiples, o datos simples. En todo caso, todo se realiza a través de una petición AJAX que envuelve el servicio $http de AngularJS.

Vimos igualmente que podemos agregar datos, cadenas, y todas esas cosas. Incluso en un formdata podríamos agregar un JSON, pues un JSON serializado al final es una simple cadena.

Esto abre muchas posibilidades, pues agregamos más dinamismo, mejor experiencia de usuario y además, todo eso se hace con muy poco código.

Ah, no olvides haber descargado angularjs.min.js, y recuerda que el archivo de PHP se llama guardar_archivos.php.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.