How to Create a Laravel CRUD Application with Image Upload

Developer Sahayak
Laravel CRUD with Image Upload – A Complete Guide

Laravel is one of the most popular PHP frameworks, and CRUD (Create, Read, Update, Delete) operations are the foundation of any web application. In this tutorial, we will create a Laravel CRUD system with image upload functionality.

Step 1: Install Laravel

First, install Laravel using Composer:

composer create-project laravel/laravel crud-app

Step 2: Set Up Database

Open the .env file and configure your database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud_app
DB_USERNAME=root
DB_PASSWORD=

Step 3: Create a Migration and Model

Run the following command to create a model and migration for the products:

php artisan make:model Product -m

Edit the generated migration file in database/migrations and add these fields:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('description')->nullable();
    $table->string('image')->nullable();
    $table->timestamps();
});

Run the migration:

php artisan migrate

Step 4: Create Controller

Generate a controller with CRUD functions:

php artisan make:controller ProductController --resource

Step 5: Define Routes

In routes/web.php, define CRUD routes:

use App\Http\Controllers\ProductController;
Route::resource('products', ProductController::class);

Step 6: Create the Blade View

Here is a complete HTML view for managing products:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel CRUD</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2>Laravel CRUD with Image Upload</h2>

        <!-- Success Message -->
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <!-- Add Product Button -->
        <a href="{{ route('products.create') }}" class="btn btn-success mb-3">Add Product</a>

        <!-- Product Table -->
        <table class="table table-bordered">
            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($products as $product)
                    <tr>
                        <td>{{ $product->id }}</td>
                        <td>{{ $product->name }}</td>
                        <td>
                            @if($product->image)
                                <img src="{{ asset('storage/' . $product->image) }}" width="80">
                            @else
                                No Image
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('products.edit', $product->id) }}" class="btn btn-primary btn-sm">Edit</a>
                            <form action="{{ route('products.destroy', $product->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</body>
</html>

Step 7: Upload and Display Images

Modify your controller to handle file uploads:

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

    if ($request->hasFile('image')) {
        $data['image'] = $request->file('image')->store('products', 'public');
    }

    Product::create($data);
    return redirect()->route('products.index')->with('success', 'Product added successfully!');
}

Conclusion

By following this guide, you can set up a complete Laravel CRUD application with image upload functionality. This example is beginner-friendly and can be customized for more advanced use cases.

Have questions? Leave a comment below!

0 Comments