laravel
How to Upload image into database in laravel 9
How to Upload image into database in laravel 9
How to upload image into database in laravel 9; Image uploading is main feature of all website. In this tutorial we will step by step how to upload image into database in laravel 9. The source code is given bellow. We also see how to link storage with public folder for image view.
How to Upload image into database in laravel 9
Follow the following steps to make image upload into database in larave 9:
Step: 01 – Project Creating
Step: 02 – View Files Creating
Step: 03 – Database Configuration
Step: 04 – Migration file creating
Step: 05 – Model Creating
Step: 06 – Controller Creating
Step: 07 – Routes Creating
Step: 08 – Storage Linking
Step: 09 – Project Testing
Step: 01 – Project Creating
First of all we need a fresh laravel 9 project to make a image upload system. For project creating run the following command in teriminal:
composer create-project laravel/laravel ImageUploador run this command
laravel new ImageUploadAfter creating your project run onto your favourite code editor.
Step: 02 – View Files Creating
Here we need two view files one use for image uploading form and other one for showing records of uploaded images.
Open your project and create a files in resource/view folder with name
upload.blade.php
After creating this file update with given code:
<!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>Image Upload in laravel 9</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row pt-5">
<div class="col-md-12">
<h1 class="text-ino mb-3 text-center">How to upload image in laravel 9</h1>
<div class="card">
<div class="card-header">Upload Images List</div>
<div class="card-body">
<form action="{{url('/upload')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group mb-3">
<input type="file" name="image" id="" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Upload Image" class="form-control btn btn-info">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Then create a file with name
welcome.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>Image Upload in laravel 9</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row pt-5">
<div class="col-md-12">
<h1 class="text-info mb-3 text-center">How to upload image in laravel 9</h1>
<div class="card">
<div class="card-header">Uploaded Images List</div>
<div class="card-body">
<a href="{{ url('/form') }}" class="btn btn-info">Upload New Image</a>
<table class="table">
<thead>
<th>ID</th>
<th>Image</th>
</thead>
<tbody>
@foreach ($image as $show)
<tr>
<td>{{ $show->id }}</td>
<td><img src="{{ asset('storage/images/'.$show->image) }}" alt="" width="200px" height="200px"></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step: 03 – Database Configuration
Now we need a database to upload our image. First of all start your Xampp and start Mysql and Apache then open http://localhost/phpmyadmin/ and create a database with the name of imageupload.
Then open your project and open .env file and change your database name or update with this given code:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=imageupload
DB_USERNAME=root
DB_PASSWORD=
Step: 04 – Migration file creating
Now we need a table in database so we are creating a migration file which create a table in database we will define columns in migration which we want.
Run this command to make migration file:
php artisan make:migration create_images_tableAfter migration creating open your project and visit database/migrations and open your created migration file and update with given code:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
};
Step: 05 – Model Creating
Now we will how to make a model in this step run the given command to make a model we don’t need to change anything in model.
php artisan make:model Image
Step: 06 – Controller Creating
This is main step in our project which provide main functionality to upload image and show uploaded images in our view file. Run the given command to make controller
php artisan make:controller ImageControllerAfter controller creating open your project and App/Http/controller and open ImageController and update with given code:
<?php
namespace App\Http\Controllers;
use App\Models\Image;
use Illuminate\Http\Request;
class ImageController extends Controller
{
public function index(){
$images = Image::all();
return view('welcome')->with('image',$images);
}
public function form(){
return view('upload');
}
public function upload(Request $request){
$images = new Image;
$image = $request->image;
$image_name = $image->getClientOriginalName();
$image->storeAs('public/images', $image_name);
$images->image = $image_name;
$images->save();
return redirect('/');
}
}Step: 07 – Routes Creating
So we need routes to perform functionality. Open your project and visit Routes/web.php and update with given code:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
/*
--------------------------------------------------------------------------
Web Routes
--------------------------------------------------------------------------
Here is where you can register web routes for your application. These
routes are loaded by the RouteServiceProvider within a group which
contains the "web" middleware group. Now create something great!
*/
Route::get('/', [ImageController::class, 'index']);
Route::get('/form', [ImageController::class, 'form']);
Route::post('/upload', [ImageController::class, 'upload']);Step: 08 – Storage Linking
So in this step we need to connect our storage with public folder so run the given command to do this:
php artisan storage:link
Step: 09 – Project Testing
Our project is completed so we need to test it working properly or not. Run this run this given command:
php artisan serve
and open the given link http://localhost:8000/
Thank You for reading this tutorial!
About author
Muhammad Zubair
My name is Muhammad Zubair. I'm a full-stack developer. I'm a owner of theskillstock.com. I love to write tutorials of PHP, Laravel, Html & css, Javascript, Java and much more with examples.
-Eloquent-Method-in-Laravel.png)
No Comments Yet.