Mon -
Sun 8.00 AM - 8.00 PM
Laravel
)
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
