Cómo subir varias imágenes y archivos en Laravel con validación

La subida de archivos o imágenes en laravel es un aspecto esencial de cualquier proyecto. Dada esta importancia, es sorprendente que muchos desarrolladores se enfrenten a retos a la hora de añadir la función de subida de archivos a sus proyectos. En particular, los desarrolladores no están seguros de cómo subir y validar archivos.

En este tutorial, voy a discutir cómo implementar la funcionalidad de carga de archivos Laravel con múltiples archivos y la opción de carga de imágenes. Utilizaré la carpeta de almacenamiento de Laravel y luego crearé un registro de base de datos para subir archivos. Usaré Laravel 10 y Bootstrap para potenciar el código de este tutorial.

Cómo subir varios archivos en Laravel con validación

La subida de múltiples archivos en laravel con validación es un proceso simplificado que mejora la integridad y seguridad de tu aplicación. La validación de archivos de Laravel no sólo simplifica el proceso de gestionar la subida de múltiples archivos, sino que también garantiza que sólo se acepten los archivos que cumplan los criterios que hayas especificado.

Requisitos previos

Para el propósito de este tutorial, asumo que tienes una aplicación Laravel instalada en un servidor web. Mi configuración es

• Entorno Linux/Unix o WAMP/XAMPP
• Laravel 10
• PHP 8.x
• MySQL / MariaDB
• Servidor web (Apache, NGINX o servidor web PHP integrado para pruebas)

He instalado una aplicación Laravel en un servidor Laravel gestionado por Cloudways porque tiene todo lo que necesitaré para este tutorial. Si no tienes una cuenta en Cloudways, regístrate gratis para explorar el mundo del alojamiento de Laravel y consulta el siguiente GIF para configurar el servidor y la aplicación en unos pocos clics.

Cómo crear un modelo con migración

Empezaré creando el modelo y las tablas en las que guardaré los archivos.

Inicia el terminal SSH, ve a la carpeta raíz pública de la aplicación y escribe los siguientes comandos:

php artisan make:model Item -m
php artisan make:model ItemDetails -m

Cómo crear un modelo de artículo

Cuando la migración y el modelo se hayan creado correctamente, ve a app/Item.php y añádele el siguiente código de Modelo:

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
protected $fillable = ['name'];
}

Cómo crear la migración

Ve a la carpeta base de datos/migración y abre el archivo de migración del elemento. Verás la estructura por defecto que incluye (en mi caso) id , nombre, marcas de tiempo.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateItemsTable extends Migration
{
public function up()
{
Schema::create('items', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
public function down()
{
Schema::drop('items');
}
}?>

Modelo de ItemDetails

El modelo consta del código siguiente

<?php

namespace App;
use Illuminate\Database\Eloquent\Model;
class ItemDetail extends Model
{
protected $fillable = ['item_id', 'filename'];
public function item()
{
return $this->belongsTo('App\Item');
}
}
?>

En el código anterior, he utilizado belongTO porque itemDetails pertenece a la tabla Item y item_id es la clave ajena. Esto se conoce como relación inversa en Laravel.

Migración de la tabla ItemDetails

Ve a la carpeta base de datos/migración y abre el archivo de migración para detalles del artículo. Verás la estructura por defecto que incluye id , nombre . marcas de tiempo.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateItemDetailsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('item_details', function (Blueprint $table) {
$table->increments('id');
$table->integer('item_id')->unsigned();
$table->foreign('item_id')->references('id')->on('items');
$table->string('filename');
$table->timestamps();
});
}
public function down()
{
Schema::drop('item_details');
}
}
?>

A continuación, en el archivo app/Providers/AppServiceProvider.php, el método de arranque establece una longitud de cadena por defecto:

use Illuminate\Support\Facades\Schema;
public function boot()
{

Schema::defaultStringLength(191);
}

Configuración de la base de datos

En una aplicación con Laravel, la configuración de la base de datos se gestiona mediante dos archivos: env y config/database.php. En mi caso, he creado una base de datos con el nombre uploading. El Gestor de Bases de Datos de Cloudways facilita mucho todo el proceso.

A continuación, ejecuta el siguiente comando en el terminal para crear tablas en la base de datos:

php artisan migrate

Ahora, cuando compruebes la base de datos, verás que las tablas se han creado correctamente.

También te puede gustar: Conectar Laravel con la Base de Datos en Tiempo Real Firebase

Establecer la ruta

La ruta establece la URL de la aplicación y el método del controlador para esta URL. Las rutas se encuentran en route/web.php y contienen el siguiente código:

Route::get('/multiuploads', 'UploadController@uploadForm');

Route::post('/multiuploads', 'UploadController@uploadSubmit');

Cómo crear el controlador

A continuación, crea el Controlador utilizando el siguiente comando:

php artisan make:controller UploadController

A continuación, ve a app/Http/Controller/UploadController y abre el archivo Controller. Añádele el siguiente código:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadController extends Controller
{
public function uploadForm()
{
return view('upload_form');
}
public function uploadSubmit(Request $request)
{
// coding ….
}
}

Cómo crear un formulario de carga de archivos

En el archivo de vista, he utilizado Bootstrap para dar estilo al código, hoja de estilos de enlace , jQuery, archivos JavaScript.

<!doctype html>

<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Uploading</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
.container {
margin-top:2%;
}
</style>
</head>
<body>
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="container">
<div class="row">
<div class="col-md-2"> <img src="/32114.svg" width="80" /></div>
<div class="col-md-8"><h2>Laravel Multiple File Uploading With Bootstrap Form</h2>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form action="/multiuploads" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group">
<label for="Product Name">Product Name</label>
<input type="text" name="name" class="form-control"  placeholder="Product Name" >
</div>
<label for="Product Name">Product photos (can attach more than one):</label>
<br />
<input type="file" class="form-control" name="photos[]" multiple />
<br /><br />
<input type="submit" class="btn btn-primary" value="Upload" />
</form>
</div>
</div>
</div>
</body>
</html>

Cómo controlar con validación

He usado clases de Bootstrap para mostrar la alerta de validación y uso métodos de Validación de Laravel para validar el tipo de archivo. Utiliza el siguiente código para el controlador:

<?php

namespace App\Http\Controllers;
use App\Item;
use App\ItemDetail;
use Illuminate\Http\Request;
class UploadController extends Controller
{
public function uploadForm()
{
return view('upload_form');
}
public function uploadSubmit(Request $request)
{
$this->validate($request, [
'name' => 'required',
'photos'=>'required',
]);
if($request->hasFile('photos'))
{
$allowedfileExtension=['pdf','jpg','png','docx'];
$files = $request->file('photos');
foreach($files as $file){
$filename = $file->getClientOriginalName();
$extension = $file->getClientOriginalExtension();
$check=in_array($extension,$allowedfileExtension);
//dd($check);
if($check)
{
$items= Item::create($request->all());
foreach ($request->photos as $photo) {
$filename = $photo->store('photos');
ItemDetail::create([
'item_id' => $items->id,
'filename' => $filename
]);
}
echo "Upload Successfully";
}
else
{
echo '<div class="alert alert-warning"><strong>Warning!</strong> Sorry Only Upload png , jpg , doc</div>';
}
}
}
}
}?>

Almacenamiento de datos y archivos en Laravel con validación

Laravel proporciona un sistema de archivos de almacenamiento que guarda todos los datos, incluidos archivos e imágenes.

Para ello, Laravel proporciona config/filesystems.php, ubicado en la carpeta config. En este archivo, puedes especificar las ubicaciones para el almacenamiento de tus archivos.

return [
'default' => 'local',
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app'),
],

// ...

Utilizando el fragmento de código anterior, podrías guardar los archivos en la carpeta app/storage en lugar de en la carpeta pública. Esta es una buena práctica de codificación para almacenar datos porque esta ubicación es inaccesible desde el navegador. A efectos de este tutorial, he creado una carpeta con el nombre fotos en storage/app/.

Cuando ejecutes la aplicación en el navegador, verás las siguientes pantallas:

Cambiar el tamaño de la imagen

Laravel necesita en gran medida ayuda externa para redimensionar imágenes, añadir filtros y otras operaciones relacionadas. Añadir estas funciones al entorno nativo de Laravel sólo hinchará la aplicación, ya que no se necesita ninguna instalación. Para ello, necesitamos un paquete llamado intervención/imagen. Anteriormente, ya hemos instalado este paquete, pero aún así Composer lo requiere como referencia.
Para redimensionar una imagen

$image = Image::make(storage_path('app/public/profile.jpg'))->resize(300, 200);

Incluso los paquetes de Laravel son fluidos.

¿Cuál es la diferencia entre discos locales y públicos?

Puedes ver los discos local y público definidos en config/filesystems.php. Laravel utiliza la configuración de disco local por defecto. La diferencia subyacente entre disco local y público es que el disco local es privado y no se puede acceder a él desde el navegador, mientras que al disco público se puede acceder fácilmente desde el navegador.

Como el disco público está en storage/app/public y la raíz del servidor de Laravel está en public, tienes que enlazar storage/app/public con la carpeta public de Laravel. Podemos hacerlo ejecutando php artisan storage:link.

Enviar archivos como adjuntos de correo electrónico

Para enviar archivos con adjuntos sólo tienes que pegar el siguiente código en tu controlador según los campos de entrada.

<?php
...
...
public function uploadDocument(Request $request) {
   $title = $request->file('name');

   // Get the uploades file with name document

   $document = $request->file('document');

   // Required validation
  
 $request->validate([
       'name' => 'required|max:255',
       'document' => 'required'
   ]);
   // Check if uploaded file size was greater than
   // maximum allowed file size
   if ($document->getError() == 1) {
       $max_size = $document->getMaxFileSize() / 1024 / 1024;  // Get size in Mb
       $error = 'The document size must be less than ' . $max_size . 'Mb.';
       return redirect()->back()->with('flash_danger', $error);
   } 
   $data = [
       'document' => $document
   ];
   // If upload was successful
   // send the email
   $to_email = [email protected];
   \Mail::to($to_email)->send(new \App\Mail\Upload($data));
   return redirect()->back()->with('flash_success', 'Your document has been uploaded.');
}

Crear clase de remitente de correo electrónico

Para enviar el correo electrónico en Laravel, necesitas crear un archivo de clase independiente. Esta clase tendrá la funcionalidad de preparar el correo electrónico y su cuerpo. También adjuntaremos el archivo subido como adjunto en línea.

Aquí está mi clase de correo electrónico:

<?php
#App\Mail\Upload.php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
class Upload extends Mailable
{

   use Queueable, SerializesModels;
   protected $data;
   /**
    * Create a new message instance.
    *
    * @return void
    */
   public function __construct($data=[])
   {
       $this->data = $data;
   }
   /**
    * Build the message.
    *
    * @return $this
    */
   public function build()
   {
       return $this->view('emails/upload')
               ->subject('Document Upload')
               ->attach($this->data['document']->getRealPath(),
               [
                   'as' => $this->data['document']->getClientOriginalName(),
                   'mime' => $this->data['document']->getClientMimeType(),
               ]);
   }
}

Las funciones importantes que se utilizan aquí son:

– getRealPath(): Get the temporary upload path

– getClientOriginalName(): Get the name of uploaded file

– getClientMimeType(): Get the mime type of uploaded file

Crea la plantilla de correo electrónico

En el paso anterior, nuestra clase de correo electrónico se refiere a la plantilla de correo electrónico como return $this->view(‘emails/upload’). Así que crearemos la plantilla de correo electrónico en resources/views/emails/upload.blade.php

#resources/views/emails/upload.blade.php

<p>Hi,</p>

<p>Please download the attached file.</p>

<p>Thanks</p>

Ahora, cuando envíes el formulario, el archivo que hayas subido se enviará como archivo adjunto por correo electrónico.

Shahzeb Ahmed

Un creativo de día (con una taza de té) y un creativo de noche. Ahmad Kamran es redactor de contenidos estacionales y Ejecutivo de Marketing Senior en Cloudways. Puedes encontrarle en su escritorio escribiendo, elaborando estrategias o jugando. Y en caso de que no puedas encontrarle aquí, estará en la montaña o junto a la orilla del río.

Get Connected on: Twitter Community Forum