Articles

Manejo de Cargas de Archivos en Laravel – CodeSource.io

Casi todas las aplicaciones tienen que ver con la carga de archivos de algún tipo: una imagen de perfil, un documento para la verificación de KYC, un documento que contiene CV, etc.

Por lo tanto, es importante entender cómo manejar la carga de archivos en Laravel.

En este tutorial, vamos a crear un formulario de perfil de usuario simple, donde el usuario deberá completar sus datos y estos detalles incluirán enviar una foto de perfil.

Al final de este tutorial, debería ser capaz de manejar la carga de archivos, manejar la validación de carga de archivos y saber qué hacer cuando el archivo no se carga correctamente.

Configurando

Para comenzar, Laravel debe estar instalado en su sistema. Si ya tiene instalado Laravel, puede omitir este paso.

Le aconsejaría que instale Laravel globalmente. Especialmente si planea usarlo a menudo. Puede hacerlo ejecutando el siguiente comando en una terminal.

composer global require laravel/installer

Una vez que se haya completado, podemos seguir adelante para crear un nuevo proyecto Laravel para este tutorial.

laravel new profile-form

Ejecutar el comando anterior creará un nuevo proyecto Laravel en el directorio actual llamado profile-form.

Sirva la aplicación ejecutando lo siguiente:

cd profile-formphp artisan serve

Navegue hasta , donde encontrará su aplicación que muestra la página de destino predeterminada de Laravel.

Escribiendo la migración de la base de datos

Necesitaremos crear una tabla de usuarios que almacenará los detalles del usuario.Laravel viene con una migración para la tabla de usuarios que se puede encontrar en database\migrations14_10_12_000000_create_users_table.php. Modifique ese archivo para que se vea así:

Aquí, hemos modificado la migración predeterminada de laravel para que la tabla de usuarios incluya una foto de campo que almacenará la URL de la fotografía de usuarios.

Modificar el .archivo env para incluir los detalles correctos de la base de datos. A continuación, ejecute las migraciones ejecutando el siguiente comando:

php artisan migrate

Actualice el modelo de usuario para reflejar la adición del campo foto. Agregue una foto a $fillable para que laravel pueda rellenarla automáticamente al crear y actualizar un usuario.

// App\User.phpprotected $fillable = ;

Una vez hecho esto, podemos proceder a construir el frontend del formulario de perfil.

Construyendo el Frontend

Necesitaremos crear un sistema de autenticación que permita al usuario registrarse e iniciar sesión en la aplicación.

Crear un nuevo archivo en recursos/vistas llamado register.blade.php. Agregue lo siguiente al archivo recién creado.

Estamos usando bootstrap para el estilo, de ahí la necesidad de agregarlo a la sección superior de la página. Hemos hecho todos los campos requeridos aquí para que el usuario no pueda enviar el formulario sin completar todos los campos.

El campo que es particularmente importante para nosotros aquí es el campo de entrada de archivos <input type="file" Update web.php para incluir la ruta a la página de registro

// web.php...Route::get('/register', function () { return view('register');});

Ir a mostrará la página de registro que contiene los campos típicos de un formulario de registro.

Formulario de carga de archivos

Necesitamos especificar el tipo de archivos que son compatibles. Dado que solo queremos archivos de imagen, necesitamos especificar en el elemento de entrada que solo queremos archivos de imagen.

Modfiy el input:type="file" para aceptar solo archivos de imagen agregando el atributo accept con un valor de image/* a la etiqueta de entrada.

A la sección de fotografía ahora le gustaría:

Mientras que el formulario parece configurado para enviar imágenes al backend, todavía no puede hacerlo. Necesitamos decirle al formulario que necesitará enviar otro tipo de datos de formulario al backend, en este caso datos binarios.

Lo hacemos agregando el atributo enctype al elemento de formulario y ajustándolo a su valor multipart/form-data.

La etiqueta de formulario de apertura debería tener el aspecto de:

<form action="#" class="col-md-5" enctype="multipart/form-data">

A continuación, necesitamos escribir el controlador para manejar la carga.

Escribiendo el Controlador

Nuestro backend debería ser capaz de manejar la validación, el almacenamiento y la redirección / autenticación del usuario.

Laravel se envía con un controlador de registro que se puede encontrar en app\Http\Controllers\Auth\RegisterController.php.

Validación

El método validator en el Controlador de Registro tiene la responsabilidad de validar los campos. Así que vamos a actualizarlo para reflejar lo que realmente queremos.

Modifique el método validador en RegisterController.php para validar todos nuestros campos.

El campo nombre debe ser un campo obligatorio y una cadena, de ahí las reglas de validación. Lo mismo ocurre con el correo electrónico y la contraseña.

El campo de contraseña debe confirmarse. En la interfaz, agregamos un campo para la confirmación de contraseña. Esto es con lo que se compara el campo de contraseña. Finalmente el campo de fotos.

Este campo es obligatorio al registrarse. Es necesario porque en nuestra migración de bases de datos, lo hicimos así. Si lo hubiéramos configurado como nullable, entonces no necesitaríamos establecer la validación en requerido.

Laravel también tiene una práctica regla de validación, image, que se utiliza para validar archivos de imagen (archivos con cualquiera de las siguientes extensiones: jpeg, png, bmp, gif o svg).

Algunas otras validaciones que puede que desee llevar a cabo en los archivos son

  • Para garantizar que el tamaño del archivo no sea mayor o menor que una cantidad específica. Esta regla se puede agregar como max:500 o min:500 según sea necesario. Cabe señalar que el tamaño del archivo aquí es en kilobytes
  • Comprobando las dimensiones de la imagen. Esto se puede hacer agregando lo siguiente a la matriz de reglas 'dimensions:min_width=100,min_height=200'.

Almacenar

El siguiente paso es almacenar la imagen. Crearemos una nueva función para manejar esta funcionalidad.

Hay varios lugares donde se pueden almacenar archivos en una aplicación: se pueden almacenar en un bucket s3, Google Drive o incluso en el servidor de aplicaciones.

Laravel viene con soporte para almacenar archivos en estas ubicaciones. Para simplificar, almacenaremos el archivo de imagen en la aplicación.

La clase de solicitud Laravel, Illuminate\Http\Request proporciona soporte para el manejo de archivos desde el primer momento. El archivo cargado se puede almacenar a través de $request→file(<inputName>)→store(<folderToBeStored>). Para nuestro caso, podríamos usar:

$request->file('photo')->store('profile')

Esto almacena el archivo en la carpeta storage \app\profile. El archivo se guarda con un nombre aleatorio y se devuelve la url del archivo.

Si queremos asignar un nombre personalizado a la imagen mientras se almacena, necesitamos usar el método storeAs.

Usando el método storeAs se verá como

$request→file(<inputName>)→storeAs(<folderToBeStored>, <customName.fileExtension>)

La extensión de archivo es importante, y laravel proporciona formas simples de obtener la extensión de archivo del archivo que se cargó, a través del método clientExtension.

Se puede obtener como se muestra a continuación

$request->file('photo')->extension()

Usando este método, podemos guardar la imagen de un usuario en función del nombre del usuario.

$fileName = $request->get('name') . '.' . $request->file('photo')->extension(); $request->file('photo')->storeAs('profile', $fileName);

En nuestro caso, podemos conformarnos con los nombres aleatorios que laravel guarda nuestro archivo.

  • Para acceder a su archivo públicamente, debe almacenarse en la carpeta storage/app/public.
  • Los archivos de otras carpetas no estarán disponibles públicamente

Vamos a crear una función que se encargue de la tarea de guardar imágenes en el almacenamiento.

Debajo de la función validador, agregue lo siguiente

La función storeImage almacena la imagen en la carpeta storage/app/public/profile y devuelve una URL a la ubicación de almacenamiento del archivo.

Uniéndolo todo

Dado que estamos agregando más cosas por hacer, necesitamos anular el método de registro predeterminado proporcionado por laravel.

Laravel proporciona un rasgo para registrar usuarios y se puede encontrar en Illuminate\Foundation\Auth\RegistersUsers.php.

Actualice el Controlador de registro para incluir lo siguiente:

Como se ha visto anteriormente, la función crear realiza el trabajo de crear un usuario en función de los datos que se le envían.

La función de registro es donde todo sucede. La validación se lleva a cabo primero antes que cualquier otra cosa.

Si se pasa la validación, almacenamos la imagen. Una vez hecho esto, creamos el usuario pasando todos los datos que se necesitan en una matriz, $data.

Si todo sucede con éxito, autenticamos al usuario y lo redirigimos a la página de inicio.

Mostrando la imagen cargada

La página de inicio es donde mostraremos todos los detalles del usuario. Primero, vamos a crear una ruta y un controlador para ello.

En el terminal, ejecute el código para generar el HomeController.

php artisan make:controller HomeController

Vaya al recién creado HomeController y agregue los siguientes métodos a la clase.

En el constructor, definimos que estamos utilizando el middleware auth. Lo que hace este middleware es que solo permite a los usuarios autorizados acceder a las funciones definidas en la clase.

Por lo tanto, el usuario solo puede venir aquí si está autenticado. Si el usuario no está autenticado, se le redirige a la página de inicio de sesión.

La función mostrar controla la visualización de la página de inicio. Estamos pasando el usuario autenticado a la vista. Para obtener más información sobre esto, consulte la documentación de laravel.

Actualice el archivo de rutas para que contenga la ruta de inicio.

// web.php...Route::get('/home', '[email protected]')->name('home');

Finalmente crea un hogar.hoja.archivo php en el directorio resources/views.

Agregue lo siguiente a inicio.hoja.php:

En el archivo de vista, tenemos acceso a los datos user que se pasaron desde el controlador.

Actualmente estamos utilizando una imagen de marcador de posición para mostrar la foto del usuario porque la foto no está disponible actualmente para nosotros.

Necesitamos crear un enlace simbólico de la carpeta public/storage a storage/app/public a Laravel lo hace simple al proporcionar el comando artisan:

php artisan storage:link

Después de hacer eso, actualice la etiqueta de imagen para mostrar la imagen de perfil.

<img src="https://codesource.io/handling-file-uploads-in-laravel/amp/{{asset('storage/'.$user->photo)}}" class="card-img-top" alt="...">

Felicidades!!! Has aprendido con éxito a almacenar imágenes en laravel.

Conclusión

Casi todas las aplicaciones requieren almacenar archivos de una forma u otra. Siguiendo la guía anterior, debería poder almacenar imágenes y cualquier otro archivo en el almacenamiento local.Todo el código utilizado aquí se puede encontrar aquí en Github.