Téléchargement d’images avec Laravel

Téléchargement d’images avec Laravel

Nous créerons deux routes : l’une pour la méthode GET afin d’afficher les formulaires et l’autre pour la méthode POST afin de gérer le code de téléchargement d’image. Nous avons créé un formulaire simple avec un champ d’entrée pour les fichiers.

Vous devrez simplement sélectionner une image, qui sera ensuite téléchargée dans le répertoire “images” du dossier public.

Étapes pour le téléchargement d’images avec Laravel 11

Installer Laravel 11
Créer un contrôleur
Créer et ajouter des routes
Créer un fichier Blade

Étape 1 : Installer Laravel 11

Étape 2 : Créer un contrôleur

php artisan make:controller ImageController

Créez un nouveau contrôleur nommé ImageController avec deux méthodes : index() pour afficher les vues et store() pour gérer la logique de téléchargement des images.

Ajoutez ensuite la logique correspondante dans le fichier du contrôleur.

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
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
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
          
        $imageName = time().'.'.$request->image->extension();  
           
        $request->image->move(public_path('images'), $imageName);
        
        /* 
            Write Code Here for
            Store $imageName name in DATABASE from HERE 
        */
          
        return back()->with('success', 'Image uploaded successfully!')
                     ->with('image', $imageName); 
    }
}
$request->image->storeAs('images', $imageName);
  
// storage/app/images/file.png
$request->image->move(public_path('images'), $imageName);
  
// public/images/file.png
$request->image->storeAs('images', $imageName, 's3');

Étape 3 : Créer et ajouter des routes

Ouvrez le fichier routes/web.php et ajoutez les routes 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 4 : Créer un fichier Blade

// resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Image Upload Example</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 Image Upload Example - ItSolutionStuff.com</h3>
        <div class="card-body">
  
            @session('success')
                <div class="alert alert-success" role="alert"> 
                    {{ $value }}
                </div>
                <img src="images/{{ Session::get('image') }}" width="40%">
            @endsession
            
            <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
        
                <div class="mb-3">
                    <label class="form-label" for="inputImage">Image:</label>
                    <input 
                        type="file" 
                        name="image" 
                        id="inputImage"
                        class="form-control @error('image') is-invalid @enderror">
        
                    @error('image')
                        <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>

 

php artisan serve

Ensuite, ouvrez votre navigateur web, entrez l’URL suivante et visualisez le résultat de l’application :

http://localhost:8000/image-upload

Vous pourrez ainsi télécharger des images et les afficher dans l’application.

par

Laravel

📍 VOIR PLUS ... 📍