Como fazer upload de várias imagens e arquivos em Laravel com validação

O upload de arquivos ou imagens no laravel é um aspeto essencial de qualquer projeto. Dada essa importância, é surpreendente que muitos desenvolvedores enfrentem desafios para adicionar o recurso de upload de arquivos aos seus projetos. Em particular, os programadores não têm a certeza de como carregar e validar ficheiros.

Neste tutorial, vou discutir como implementar a funcionalidade de carregamento de ficheiros do Laravel com a opção de carregamento de múltiplos ficheiros e imagens. Usa a pasta de armazenamento do Laravel e cria um registo na base de dados para carregar ficheiros. Usa o Laravel 10 e o Bootstrap para desenvolver o código deste tutorial.

Como fazer upload de vários arquivos em Laravel com validação

Carregar vários ficheiros em Laravel com validação é um processo simplificado que melhora a integridade e a segurança da tua aplicação. A validação de ficheiros do Laravel não só simplifica o processo de carregamento de múltiplos ficheiros, como também garante que apenas os ficheiros que cumprem os critérios especificados são aceites.

Pré-requisitos

Para efeitos deste tutorial, parto do princípio de que tens uma aplicação Laravel instalada num servidor Web. Minha configuração é:

• Ambiente Linux/Unix ou WAMP/XAMPP
• Laravel 10
• PHP 8.x
• MySQL / MariaDB
• Servidor Web (Apache, NGINX ou servidor Web PHP integrado para testes)

Eu instalei um aplicativo Laravel em um servidor Laravel gerenciado pela Cloudways porque ele tem tudo o que eu preciso para este tutorial. Se ainda não tens uma conta na Cloudways, regista-te gratuitamente para explorares o mundo perfeito do alojamento Laravel e verifica o seguinte GIF para configurares o servidor e a aplicação em apenas alguns cliques.

Como criar um modelo com migração

Começo por criar o modelo e as tabelas em que vou guardar os ficheiros.

Abre o terminal SSH, vai para a pasta raiz pública da aplicação e escreve os seguintes comandos:

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

Como criar um modelo de item

Quando a migração e o modelo tiverem sido criados com êxito, vai para app/Item.php e adiciona o seguinte código de modelo:

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

Como criar a migração

Vai para a pasta database/migration e abre o ficheiro de migração do item. Verás a estrutura predefinida que inclui (no meu caso) id , nome, carimbos de data/hora.

<?php

utiliza o esquema Illuminate\Support\Facades\Schema;
utiliza Illuminate\Database\Schema\Blueprint;
utiliza o Illuminate\Database\Migrations\Migration;
class CreateItemsTable extends Migration
{
função pública up()
{
Schema::create('items', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
função pública down()
{
Schema::drop('items');
}
}?>

Modelo de ItemDetails

O modelo é composto pelo seguinte código:

<?php

namespace App;
utiliza Illuminate\Database\Eloquent\Model;
class ItemDetail extends Model
{
protected $fillable = ['item_id', 'filename'];
função pública item()
{
Retorna $this->belongsTo('App\Item');
}
}
?>

No código acima, usei belongTO porque itemDetails pertence à tabela Item e item_id é a chave estrangeira. Isto é conhecido como relação inversa em Laravel.

Migração da tabela ItemDetails

Vai à pasta da base de dados/migração e abre o ficheiro de migração para detalhes do item. Verás a estrutura predefinida que inclui id , nome . carimbos de data e hora.

<?php

utiliza o esquema Illuminate\Support\Facades\Schema;
utiliza Illuminate\Database\Schema\Blueprint;
utiliza o Illuminate\Database\Migrations\Migration;
class CreateItemDetailsTable extends Migration
{
/**
* Executa as migrações.
*
* @return void
*/
função pública 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();
});
}
função pública down()
{
Schema::drop('item_details');
}
}
?>

Em seguida, no ficheiro app/Providers/AppServiceProvider.php, o método de arranque define um comprimento de cadeia de caracteres predefinido:

utiliza o esquema Illuminate\Support\Facades\Schema;
função pública boot()
{

Schema::defaultStringLength(191);
}

Configuração da base de dados

Numa aplicação com Laravel, a configuração da base de dados é feita através de dois ficheiros: env e config/database.php. No meu caso, criei uma base de dados com o nome uploading. O Cloudways Database Manager torna todo o processo muito fácil.

Em seguida, executa o seguinte comando no terminal para criar tabelas na base de dados:

php artisan migrate

Agora, quando verificares a base de dados, verás que as tabelas foram criadas com êxito.

Também podes gostar: Conecta Laravel com Firebase Real Time Database

Prepara a rota

Route define o URL da aplicação e o método do controlador para este URL. As rotas estão localizadas em route/web.php e contêm o seguinte código:

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

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

Como criar o controlador

Em seguida, cria o Controlador utilizando o seguinte comando:

php artisan make:controller UploadController

Em seguida, vai a app/Http/Controller/UploadController e abre o ficheiro Controller. Adiciona-lhe o seguinte código:

namespace App\Http\Controllers;
utiliza Illuminate\Http\Request;
class UploadController extends Controller
{
função pública uploadForm()
{
retorna view('upload_form');
}
função pública uploadSubmit(Request $request)
{
// codificação ....
}
}

Como criar um formulário de carregamento de ficheiros

No ficheiro de visualização, utilizei o Bootstrap para estilizar o código, a folha de estilos de ligação, o jQuery e os ficheiros 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>Carregamento do Laravel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Tipos de letra -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Estilos -->
<style>
.contentor {
margem superior:2%;
}
</style>
</head>
<body>
@se (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="contentor">
<div class="row">
<div class="col-md-2"> <img src="/32114.svg" width="80" /></div>
<div class="col-md-8"><h2>Carregamento de vários ficheiros em Laravel com o formulário Bootstrap</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="Nome do produto">Nome do produto</label>

</div>
<label for="Nome do produto">Fotos do produto (podes anexar mais do que uma):</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>

Como controlar a validação

Utilizei as classes Bootstrap para mostrar o alerta de validação e utilizei os métodos de validação do Laravel para validar o tipo de ficheiro. Utiliza o seguinte código para o controlador:

<?php

namespace App\Http\Controllers;
utiliza App\Item;
utiliza App\ItemDetail;
utiliza Illuminate\Http\Request;
class UploadController extends Controller
{
função pública uploadForm()
{
retorna view('upload_form');
}
função pública uploadSubmit(Request $request)
{
$this->validate($request, [
'name' => 'required',
'fotos'=>'obrigatório',
]);
se($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);
se($check)
{
$items= Item::create($request->all());
foreach ($request->photos as $photo) {
$filename = $photo->store('photos');
ItemDetail::cria([
'item_id' => $items->id,
'nome do ficheiro' => $nome do ficheiro
]);
}
echo "Carrega com sucesso";
}
mais
{
echo '<div class="alert alert-warning"><strong>Warning!</strong> Sorry Only Upload png , jpg , doc</div>';
}
}
}
}
}?>

Armazenamento de dados e ficheiros em Laravel com validação

O Laravel fornece um sistema de ficheiros de armazenamento que guarda todos os dados, incluindo ficheiros e imagens.

Para isso, o Laravel fornece config/filesystems.php, localizado na pasta config. Neste ficheiro, podes especificar as localizações para o teu armazenamento de ficheiros.

regressa [
'default' => 'local',
'discos' => [
'local' => [
'driver' => 'local',
'root' => caminho_de_armazenamento('app'),
],

// ...

Utilizando o fragmento de código acima, podes guardar os ficheiros na pasta app/storage em vez de na pasta pública. Esta é uma boa prática de codificação para armazenar dados, porque esta localização é inacessível a partir do browser. Para efeitos deste tutorial, criei uma pasta com o nome fotos em storage/app/.

Quando executares a aplicação no browser, verás os seguintes ecrãs:

Redimensiona a imagem

O Laravel precisa de ajuda externa para redimensionar imagens, adicionar filtros e outras operações relacionadas. Adicionar essas funcionalidades ao ambiente nativo do Laravel só vai inchar a aplicação, já que não é necessário instalar nada. Para isso, precisamos de um pacote chamado intervention/image. Anteriormente, já instalámos este pacote, mas ainda assim o composer necessita dele para referência.
Para redimensionar uma imagem

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

Até os pacotes do Laravel são fluentes.

Qual é a diferença entre discos locais e públicos?

Podes ver os discos local e público definidos em config/filesystems.php. O Laravel usa a configuração de disco local por padrão. A diferença subjacente entre o disco local e o disco público é que o disco local é privado e não pode ser acedido a partir do browser, enquanto o disco público pode ser facilmente acedido a partir do browser.

Como o disco público está em storage/app/public e a raiz do servidor do Laravel está em public, precisas de ligar storage/app/public à pasta pública do Laravel. Para isso, executa php artisan storage:link.

Enviar ficheiros como anexos de e-mail

Para enviar ficheiros com anexos, basta colar o seguinte código no teu controlador, de acordo com os campos de entrada.

<?php
...
...
função pública uploadDocument(Request $request) {
  $title = $request->file('name');

  // Obtém o ficheiro de uploads com o nome document

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

  // Validação obrigatória
  
  $request->validate([
  'name' => 'required|max:255',
  'document' => 'required'
  ]);
  // Verifica se o tamanho do ficheiro carregado é superior a
  // tamanho máximo permitido do ficheiro
  Se ($document->getError() == 1) {
  $max_size = $document->getMaxFileSize() / 1024 / 1024; // Obtém o tamanho em Mb
  $error = 'O tamanho do documento tem de ser inferior a ' . $max_size . 'Mb.';  
  devolve redirect()->back()->with('flash_danger', $error);
  }  
  $data = [
  'document' => $document
  ];
  // Se o carregamento foi bem sucedido
  // envia o e-mail
  $para_email = [email protected];
  \Mail::to($to_email)->send(new \App\Mail\Upload($data));
  return redirect()->back()->with('flash_success', 'O teu documento foi carregado.');
}

Criar classe de remetente de e-mail

Para enviar o e-mail em Laravel, tens de criar um ficheiro de classe separado. Esta classe terá a funcionalidade de preparar o e-mail e o seu corpo. Também anexaremos o ficheiro carregado como anexo inline.

Aqui tens a minha turma de e-mail:

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

  utiliza Queueable, SerializesModels;
  Protegido $data;
 
/**
  * Cria uma nova instância de mensagem.
  *
  * @return void
  */
  função pública __construct($data=[])
  {
  $this->data = $data;
  }
 
/**
  * Constrói a mensagem.
  *
  * @retorna $this
  */
  função pública build()
  {
  retorna $this->view('emails/upload')
  ->subject('Document Upload')
  ->ataca($this->data['document']->getRealPath(),
  [
  'as' => $this->data['document']->getClientOriginalName(),
  'mime' => $this->data['document']->getClientMimeType(),
  ]);
  }
}

As funções importantes aqui utilizadas são:

- getRealPath(): Obtém o caminho de upload temporário

- getClientOriginalName(): Obtém o nome do arquivo carregado

- getClientMimeType(): Obtém o tipo de mime do ficheiro carregado

Cria o modelo de e-mail

No passo acima, a nossa classe de correio eletrónico refere-se ao modelo de correio eletrónico como return $this->view(’emails/upload’). Por isso, vamos criar o modelo de correio eletrónico em resources/views/emails/upload.blade.php

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

<p>Olá,</p>

<p>Por favor, transfere o ficheiro em anexo.</p>

<p>Obrigado</p>

Agora, quando submeteres o formulário, o ficheiro carregado será enviado como anexo de correio eletrónico.

Shahzeb Ahmed

Um criativo de dia (com uma chávena de chá) e um criativo de noite. Ahmad Kamran é um escritor de conteúdos sazonais e Executivo de Marketing Sénior na Cloudways. Podes encontrá-lo na sua secretária a escrever, a criar estratégias ou a jogar jogos. E, caso não o encontres aqui, ele estará nas montanhas ou à beira do rio.

Get Connected on: Twitter Community Forum