Comment télécharger plusieurs images dans une application Laravel .
Nous allons créer une table “images” avec une colonne “name”. Ensuite, nous concevrons une simple page web où les utilisateurs pourront sélectionner plusieurs images à télécharger. Ces images seront enregistrées dans le dossier “images” ainsi que dans la base de données.
Étapes pour le téléchargement multiple d’images avec Laravel 11
Installer Laravel 11
Créer une migration et un modèle
Créer un contrôleur
Créer des routes
Créer un fichier Blade
Étape 1 : Installer Laravel 11
composer create-project laravel/laravel example-appÉtape 2 : Créer une migration et un modèle
php artisan make:migration create_images_tableCréez une migration pour la table “images”. Exécutez la commande suivante pour générer le fichier de migration :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('images');
}
};Ensuite, exécutez la migration :
php artisan migrateCréez un modèle nommé Image pour gérer les données :
php artisan make:model Image<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}Étape 3 : Créer un contrôleur
Créez un contrôleur nommé ImageController pour gérer les vues et la logique de téléchargement des images :
php artisan make:controller ImageControllerAjoutez les méthodes nécessaires pour afficher les vues et stocker les images dans le dossier public et dans la base de données.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('imageUpload');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): RedirectResponse
{
// Validate incoming request data
$request->validate([
'images' => 'required|array',
'images.*' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
// Initialize an array to store image information
$images = [];
// Process each uploaded image
foreach($request->file('images') as $image) {
// Generate a unique name for the image
$imageName = time() . '_' . uniqid() . '.' . $image->getClientOriginalExtension();
// Move the image to the desired location
$image->move(public_path('images'), $imageName);
// Add image information to the array
$images[] = ['name' => $imageName];
}
// Store images in the database using create method
foreach ($images as $imageData) {
Image::create($imageData);
}
return back()->with('success', 'Images uploaded successfully!')
->with('images', $images);
}
}//Store Images in Storage Folder
$image->storeAs('images', $imageName);
// storage/app/images/file.png
// Store Images in Public Folder
$image->move(public_path('images'), $imageName);
// public/images/file.png
// Store Images in S3
$image->storeAs('images', $imageName, 's3');Étape 4 : Créer des routes
Ajoutez des routes dans le fichier routes/web.php pour gérer les requêtes GET et POST :
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');Étape 5 : Créer un fichier Blade
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Multiple Image Upload Example - ItSolutionStuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Multiple Image Upload Example - ItSolutionStuff.com</h3>
<div class="card-body">
@session('success')
<div class="alert alert-success" role="alert">
{{ $value }}
</div>
@foreach(Session::get('images') as $image)
<img src="images/{{ $image['name'] }}" width="300px">
@endforeach
@endsession
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data" class="mt-2">
@csrf
<div class="mb-3">
<label class="form-label" for="inputImage">Select Images:</label>
<input
type="file"
name="images[]"
id="inputImage"
multiple
class="form-control @error('images') is-invalid @enderror">
@error('images')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Créez un fichier nommé imageUpload.blade.php dans le dossier resources/views. Dans ce fichier, concevez un formulaire permettant aux utilisateurs de sélectionner plusieurs images à télécharger.
Lancer l’application Laravel
Toutes les étapes nécessaires étant terminées, lancez l’application Laravel avec la commande suivante :
php artisan serveEnsuite, ouvrez votre navigateur web, entrez l’URL suivante et visualisez le résultat de l’application :
http://localhost:8000/image-upload
