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

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 ImageUpload

or run this command

laravel new ImageUpload

After 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_table

After 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 ImageController

After 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!

 

 

Comments

No Comment posted Yet!

Leave a Reply

OK! You can skip this field.