Comment mettre en place une functionnalité d'upload de fichier avec laravel

Publié par administrateur vue 491

Mettre en place une fonctionnalités d'upload de fichier avec le framework laravel est une tache relativement simple et surtout courante du coup je vous montre dans ici dans ce  tutoriel comment mettre cette fonctionnalités .

Pour ce faire Créons  un modèle d'image, une migration, un contrôleur et des routes

php artisan make:model Image -mc

Apres avoir exécuté cette commande laravel vous  génerera un modèle , et une migration 

{
    Schema::create('images', function (Blueprint $table) {
        $table->id();
        $table->string('image');
        $table->timestamps();
    });
}

Et le modèle 

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
    use HasFactory;
    protected $fillable = [
        'image'
    ];
}

Apres le contrecoller 

amespace App\Http\Controllers;


use App\Models\Image;
use Illuminate\Http\Request;
class ImageController extends Controller
{
    public function index()
    {
        return view('image');
    }
    public function store(Request $request)
    {
        $this->validate($request, [
            'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
        ]);
        $image_path = $request->file('image')->store('image', 'public');
        $data = Image::create([
            'image' => $image_path,
        ]);
        session()->flash('success', 'Image a bien été chargée');
        return redirect()->route('image.index');
    }
}

Une route pour faire le lien entre la vue et le controller amespace App\Http\Controllers;

Route::get('/image', [ImageController::class,'index'])->name('image.index');
Route::post('/image', [ImageController::class,'store'])->name('image.store');

Apres la vue 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>image Upload in Laravel 9</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
        <div class="relative flex items-center min-h-screen justify-center overflow-hidden">
            <form action="{{ route('image.store') }}" method="POST" class="shadow p-12" enctype="multipart/form-data">
                @csrf
                <label class="block mb-4">
                    <span class="sr-only">Choose File</span>
                    <input type="file" name="image"class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-             sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
                    @error('image')
                    <span class="text-red-600 text-sm">{{ $message }}</span>
                    @enderror
                </label>
                <button type="submit" class="px-4 py-2 text-sm text-white bg-indigo-600 rounded">Submit</button>
            </form>
        </div>
    </body>
</html>

Executer cette commande pour faire le lien entre le fichier public et le fichier storage 

php artisan storage:link

Démarrer votre application laravel pour tester la fonctionnalité 

php artisan serve