composer require laravel/breeze --dev
php artisan breeze:install

php artisan make:model Image -mcr

        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained()->onDelete('cascade');
            $table->string('title')->nullable();
            $table->string('path');
            $table->timestamps();
        });

php artisan migrate

Route::resource('images', ImageController::class)->middleware(['auth']);

Route::get('/', function () {
    return redirect()->route('images.index');
});

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
    <nav class="bg-gray-800">
        <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
            <div class="relative flex h-16 items-center justify-between">

                <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
                    <div class="flex flex-shrink-0 items-center">
                        <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
                            alt="Your Company">
                    </div>
                    <div class="hidden sm:ml-6 sm:block">
                        <div class="flex space-x-4">
                            <a href="/"
                                class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Home</a>
                            <a href="/dashboard"
                                class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Dashboard</a>
                        </div>
                    </div>
                </div>
            </div>
    </nav>
    <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">

        {{ $slot }}

    </main>
</body>
</html>

<x-layout>
    @if (session('success'))
        <div class="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 ">
            {{ session('success') }}
        </div>
    @endif
    <h1 class="text-center text-3xl font-semibold my-5">Upload Image</h1>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="{{ route('images.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">

            <div class="mb-5">
                <input type="text" name="title" id="title"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                    placeholder="Image Title (optional)" />
            </div>
            <div class="mb-5">
                <input id="image" name="image" type="file"
                    class="block w-full text-xl text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50">
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help"> JPEG, PNG, JPG or GIF
                    (MAX. 2048byte).</p>
            </div>
            <div class="mb-5">
                <button type="submit"
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-10 py-2.5 me-2 mb-2 ">Upload</button>
            </div>
        </div>
    </form>
    <h1 class="text-center text-3xl font-semibold my-5">My Gallery</h1>
    @if ($images->isEmpty())
        <p>No images found.</p>
    @else
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

            @foreach ($images as $image)
                <div>
                    <a href="{{ route('images.show', $image) }}">
                        <img src="{{ asset('storage/' . $image->path) }}"
                            class="object-cover object-center w-full h-40 max-w-full rounded-lg hover:opacity-70"
                            alt="{{ $image->title }}">
                    </a>
                </div>
            @endforeach
        </div>
    @endif
</x-layout>

<x-layout>

    <div class=" p-5 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">

        <img class="rounded-t-lg object-center mx-auto hover:opacity-80" src="{{ asset('storage/' . $image->path) }}"
            alt="{{ $image->title }}" />

        <div class="flex justify-between items-center p-4">

            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Image Caption:
                {{ $image->title }}</h5>

            <form action="{{ route('images.destroy', $image) }}" method="POST" class="d-inline">
                @csrf
                @method('DELETE')
                <button type="submit"
                    class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2">Delete</button>
            </form>
        </div>
    </div>
</x-layout>

    public function index()
    {
        $images = Image::all();
        return view('welcome', compact('images'));
    }

   public function store(Request $request)
    {
        $request->validate([
            'title' => 'nullable|string|max:255',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
        ]);

        $path = $request->file('image')->store('images', 'public');

        Auth::user()->images()->create([
            'title' => $request->input('title'),
            'path' => $path,
        ]);

        return redirect()->route('images.index')->with('success', 'Image uploaded successfully!');
    }

    public function destroy(Image $image)
    {
        Storage::disk('public')->delete($image->path);
        $image->delete();
        return redirect()->route('images.index')->with('success', 'Image deleted successfully!');
    }