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.

  1. image_list.blade.php
  2. 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



Related Topics