Laravel 8 Image Upload and Fetch Tutorial Example

In this article we will learn how to upload and fetch image in MySql database using laravel 8 .

Follow all the below steps to insert and fetch image from database in Laravel.

Step 1- Create blade file.

image_list.blade.php
image_store.blade.php

resources /views /image_list.blade.php

<!DOCTYPE html>
<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>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
    <div class="d-flex justify-content-center p-2 m-2">
        <div class="card p-2 w-50">
            <div class="d-flex justify-content-between">
                <div class="">
                    <h3>Image List</h3>
                </div>
                <div class="">
                    <a href="{{ route('store_image') }}"><button class="btn btn-primary"><i class="fa fa-plus"></i> New
                            Image</button></a>
                </div>
            </div>
            <hr class="my-1">
            <div class="row">
                @foreach ($images as $image)
                <div class="col-3 mt-2">
                    <div class="card">
                        <img src="{{ asset($image->image) }}" height="100" alt="image">
                    </div>
                    <h6>{{ $loop->iteration }}.<u>{{ $image->title }}</u></h6>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</body>

</html>

resources /views /image_store.blade.php

<!DOCTYPE html>
<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>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <style>
        label {
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="d-flex justify-content-center p-2 m-2">
        <div class="card p-2 w-50">

            <div class="d-flex justify-content-between">
                <div class="">
                    <h3>Laravel Image Store</h3>
                </div>
                <div class="">
                    <a href="{{ route('image_list') }}"><button class="btn btn-primary"><i class="fa fa-list"></i> Image
                            List</button></a>
                </div>
            </div>
            <hr class="my-1">
            <form action="{{ route('save_image') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col">
                        <label for="">Image Title</label>
                        <input type="text" name="title" class="form-control" placeholder="Enter title here..">
                    </div>
                    <div class="col">
                        <label for="">Upload Image Here</label>
                        <input type="file" accept="image/*" name="image" class="form-control">
                    </div>
                </div>
                <div class="my-2">
                    <button type="submit" class="btn btn-success w-100">Submit</button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

Step 2- Create Controller

Now, open your terminal and run below command to make ImageController.php

php artisan make:controller ImageController

app /Http /controllers /ImageContoller.php

<?php
namespace App\Http\Controllers;
use App\Models\Image;
use Illuminate\Http\Request;

class ImageController extends Controller
{
    function store_image(){
        return view('image_store');
   }
    function save_image(Request $request){
        $img_name = 'img_'.time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(public_path('img/'), $img_name);
        $imagePath = 'img/'.$img_name;
        Image::create(['title'=> $request->title, 'image'=>$imagePath]);
        return redirect('image-list');
   } 

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

Step 3 – Create storage folder

Create Img folder in Public folder.

Step 4 – Create Model

In this step, create Image model.

Run this below command in your terminal.

php artisan make:model Image

Step 5- Create route

Create routes for store image and fetch image list. Go to routes folder then open web.php and simply paste below code .

routes\web.php

<?php
use App\Http\Controllers\ImageController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('store-image', [ImageController::class, 'store_image'])->name('store_image');
Route::post('save-image', [ImageController::class, 'save_image'])->name('save_image');
Route::get('image-list', [ImageController::class, 'image_list'])->name('image_list');

Step 6- Create images table in your database

Step 7 – Run php artisan serve

Result –

http://127.0.0.1:8000/store-image

http://127.0.0.1:8000/image-list