image dans Laravel 

Comment télécharger une image dans Laravel ?

Partagez sur:

Dans ce tutoriel Laravel, je vais vous expliquer comment télécharger une image dans Laravel.

En suivant ces étapes, vous pouvez télécharger intelligemment n’importe quel fichier multimédia dans Laravel.

Étapes pour télécharger une image dans Laravel

Étape 1 : Installer la bibliothèque multimédia Spatie

Exécutez la commande ci-dessous dans le répertoire racine de votre projet

composer require spatie/laravel-medialibrary

Ce package permet d’associer toutes sortes de fichiers à des modèles Eloquent. Il fournit une API simple et fluide avec laquelle travailler.

Étape 2 : Configurer spatie/laravel-medialibrary

Exécutez la commande ci-dessous

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" –tag="migrations"

Cette commande publie le fichier de migrations et ce fournisseur de services.

php artisan migrate

 

Migrez la table multimédia dans votre base de données.

Étape 3 : Créer l’itinéraire utilisateur

Ajoutez le code ci-dessous dans votre route/web.php

use Illuminate\Support\Facades\Route;
 
Route::get('/users', [UserController::class, 'index'])->name('user.index');
Route::get('/user', [UserController::class, 'create'])->name('user.create');
Route::post('/user', [UserController::class, 'store'])->name('user.store');

Étape 4 : Créer un contrôleur pour traiter la demande

php artisan make:controller UserController

Accédez maintenant au chemin ci-dessous

app/Http/Controllers/UserController.php

Ajoutez ensuite le code comme suit

namespace App\Http\Controllers;
 
use App\Models\User;
use Illuminate\Http\Request;
 
class UserController extends Controller
{
    public function index(Request $request)
    {
        $users = User::all();
        return view('user.index', compact('users'));
    }
 
    public function create(Request $request)
    {
        return view('user.create');
    }
 
    public function store(Request $request)
    {
        $user = User::create([
            'name' => $request->name,
            "email" => $request->email,
            "password" => $request->password,
        ]);
        if($request->hasFile('avatar') && $request->file('avatar')->isValid()){
            $user->addMediaFromRequest('avatar')->toMediaCollection('avatar');
        }
        return redirect()->route('user.index');
    }
}

Étape 5 : Créer un fichier Blade

Dans votre répertoire de vue, créez 2 fichiers – create.blade.php et index.blade.php

Déplacez-vous vers le chemin suivant

resources/views/user/index.blade.php

Ajoutez l’extrait de code ci-dessous

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Upload Media in Laravel</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="d-flex p-2 bd-highlight mb-3">
            <a href="{{ route('user.create') }}" class="btn btn-dark">Add</a>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th width="30%">Avatar</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $key=>$item)
                <tr>
                    <td>{{ ++$key }}</td>
                    <td>{{ $item->name }}</td>
                    <td>{{ $item->email }}</td>
                    <td><img src="{{$item->getFirstMediaUrl('avatar', 'thumb')}}" / width="120px"></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</body>
</html>

LIRE AUSSI: Comment intégrer Google reCAPTCHA dans Laravel ?

Naviguez maintenant vers le chemin suivant

resources/views/user/create.blade.php

Ajoutez ensuite le code comme suit

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Upload Media in Laravel</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="col-6 m-auto">
            <div class="card ">
                <div class="card-header">
                    <div class="d-flex p-2 bd-highlight mb-3 justify-content-between">
                        <h4 class="card-title m-0">User Create</h4>
                        <a href="{{ route('user.index') }}" class="btn btn-outline-danger btn-sm h-auto">Go Back</a>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.store') }}" enctype="multipart/form-data" method="post">
                        @csrf
                        <div class="mb-3">
                            <label>Name</label>
                            <input type="text" name="name" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Password</label>
                            <input type="password" name="password" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Avatar:</label>
                            <input type="file" name="avatar" class="form-control">
                        </div>
                        <div class="d-grid">
                            <button class="btn btn-primary">Store</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Étape 6 : exécutez maintenant votre magie à l’adresse URL 127.0.0.1:8000

$ php artisan co:ca
$ php artisan ro:ca
$ php artisan serve

Conclusion :

Vous avez implémenté avec succès les téléchargements d’images dans Laravel.

Les utilisateurs peuvent désormais télécharger des images et vous pouvez les afficher selon vos besoins.

Si vous avez besoin d’aide supplémentaire, vous pouvez contacter les développeurs Laravel.


Partagez sur: