Laravel 8 CRUD with Image Upload Tutorial

Hi Artisan ,In this laravel 8 crud with image upload tutorial I am going to explain example of laravel crud with image upload. This article will give you easy and robust example of crud with image upload in laravel 8 application. it's going to be very simple example of laravel image upload crud.

You can see laravel image upload with crud tutorial to learn crud process with image upload.  You have to do the following to complete this laravel crud example with image upload . You just need to follow some few step and you will get basic crud with image upload example source code.

In this tutorial, you will learn very basic crud with image upload operation with laravel new version 8. So this image upload with crud tutorial is for laravel 8 tutorial for beginners step by step. So let's start laravel 8 crud with image upload tutorial step by step:

Step 1 : Install Laravel 8

In the first step  we need to get fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Read also: Dynamic CRUD Example with Repository Design Pattern in Laravel

Step 2: Create Produt Model

In this tutorial i am going to create crud with image upload laravel tutorial. So we are going to create crud application for product. so we have to create migration for "products" table using Laravel 8 php artisan command, so run below command to create product model.

php artisan make:model Product -m

And update your products table like below:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('detail');
            $table->string('image');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

and update the Product model like below:

app/Models/Product.php

namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Product extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name', 'detail', 'image'
    ];
}

Step 3: Create Route

Here in this step, we need to add resource route for product crud application. so open your "routes/web.php" file and add following route.

routes/web.php

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

Read also: Laravel 8 Vue Js Crud Example with Pagination

Step 4: Create Controller

In this step, now we need to create new controller as ProductController. in this controller we write logic to store image, we store images in "images" folder of public folder. So run bellow command to create product controller.

php artisan make:controller ProductController --resource --model=Product

So, let's copy bellow code and put on ProductController.php file and update it like that:

app/Http/Controllers/ProductController.php

namespace App\Http\Controllers;
  
use App\Models\Product;
use Illuminate\Http\Request;
  
class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::latest()->paginate(5);
    
        return view('products.index',compact('products'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }
   
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('products.create');
    }
    
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'detail' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
  
        $input = $request->all();
  
        if ($image = $request->file('image')) {
            $destinationPath = 'image/';
            $profileImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
            $image->move($destinationPath, $profileImage);
            $input['image'] = "$profileImage";
        }
    
        Product::create($input);
     
        return redirect()->route('products.index')
                        ->with('success','Product created successfully.');
    }
     
    /**
     * Display the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function show(Product $product)
    {
        return view('products.show',compact('product'));
    }
     
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function edit(Product $product)
    {
        return view('products.edit',compact('product'));
    }
    
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Product $product)
    {
        $request->validate([
            'name' => 'required',
            'detail' => 'required'
        ]);
  
        $input = $request->all();
  
        if ($image = $request->file('image')) {
            $destinationPath = 'image/';
            $profileImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
            $image->move($destinationPath, $profileImage);
            $input['image'] = "$profileImage";
        }else{
            unset($input['image']);
        }
          
        $product->update($input);
    
        return redirect()->route('products.index')
                        ->with('success','Product updated successfully');
    }
  
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function destroy(Product $product)
    {
        $product->delete();
     
        return redirect()->route('products.index')
                        ->with('success','Product deleted successfully');
    }
}

Step 5: Create Blade Files

Almost we all are set to go. In this final step. In this step we have to create just blade files. So mainly we have to create layout file and then create new folder "products" then create blade files of crud app. So finally you have to create following bellow blade file:

• layout.blade.php
• index.blade.php
• create.blade.php
• edit.blade.php
• show.blade.php

resources/views/products/layout.blade.php

resources/views/products/index.blade.php

resources/views/products/create.blade.php

resources/views/products/edit.blade.php

resources/views/products/show.blade.php

Now run php artisan serve and visit this following url:

Read also: Laravel CRUD With MongoDB Tutorial

Hope it can help you.