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.

See the gist on github.

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í:

See the gist on github.

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.