Laravel 9 Upload Image Example Tutorial

Laravel 9 Upload Image Example Tutorial

Laravel 9 image upload; In this tutorial, we will learn how to upload images to the MySQL database and storage directory with validation in laravel 9 apps. And as well as, how to validate image mime type, size, dimension, etc on laravel controller by using laravel validation rules.

How to Upload Image to Database in Laravel 9 Apps

Use the following steps to upload image on public storage and directory in laravel 9 applications:

  • Step 1 – Download Laravel 9 Application
  • Step 2 – Configure Database with App
  • Step 3 – Create Model & Migration
  • Step 4 – Create Routes
  • Step 5 – Create Controller By Artisan Command
  • Step 6 – Create Blade View
  • Step 7 – Create Images Directory inside Storage/app/public
  • Step 8 – Run Development Server

Step 1 – Download Laravel 9 Application

First of all, download or install laravel 9 new setup. So, open terminal and type the following command to install new laravel 9 app into your machine:

composer create-project --prefer-dist laravel/laravel LaravelImage

Step 2 – Configure Database with App

In this step, setup database with your downloded/installed laravel 9 app. So, you need to find .env file and setup database details as following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3 – Create Model & Migration

In this step, open again your command prompt. And run the following command on it. To create model and migration file for form:

php artisan make:model Photo -m

After that, open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:

    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('path');
            $table->timestamps();
        });
    }

Then, open again command prompt and run the following command to create tables into database:

php artisan migrate

Step 4 – Create Routes

In this step, open web.php file from routes direcotry. And update the following routes into web.php file:

<?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('image-upload', [ ImageController::class, 'index' ]);
Route::post('image-upload', [ ImageController::class, 'store' ])->name('image.store');

Step 5 – Create Controller By Artisan Command

In this step, run the following command on command prompt to create image controller file:

php artisan make:controller ImageController

After that, go to app/http/controllers and open ImageController.php file. And update the following code into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;


class ImageController extends Controller
{
    public function index()
    {
        return view('image');
    }

    public function store(Request $request)
    {
        
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',

        ]);

        $name = $request->file('image')->getClientOriginalName();

        $path = $request->file('image')->store('public/images');


        $save = new Photo;

        $save->name = $name;
        $save->path = $path;

        $save->save();

      return redirect('image-upload')->with('status', 'Image Has been uploaded')->with('image',$name);

    }
}

The following line of code will upload an image into the images directory:

$path = $request->file('image')->store('public/images');

Step 6 – Create Blade View

Now, create image upload form in blade view file to display image upload form and submit to the database.

So, Go to resources/views and create image.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Image Upload Example - Tutsmake.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
      
<body>
<div class="container">
       
    <div class="panel panel-primary">
  
      <div class="panel-heading">
        <h2>Laravel 9 Image Upload Example - Tutsmake.com</h2>
      </div>
 
      <div class="panel-body">
       
        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
        </div>
        <img src="images/{{ Session::get('image') }}">
        @endif
      
        <form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
  
            <div class="mb-3">
                <label class="form-label" for="inputImage">Image:</label>
                <input 
                    type="file" 
                    name="image" 
                    id="inputImage"
                    class="form-control @error('image') is-invalid @enderror">
  
                @error('image')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
   
            <div class="mb-3">
                <button type="submit" class="btn btn-success">Upload</button>
            </div>
       
        </form>
      
      </div>
    </div>
</div>
</body>
    
</html>

The following below code will display the validation error message on the blade view file:

  @error('image')
  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
  @enderror

Step 7 – Create Images Directory inside Storage/app/public

Now, create images directory inside storage/app/public directory. Because the following line of code will upload an image into the images directory, which is located inside storage/app/public/ directory:

$path = $request->file('image')->store('public/images');

Step 8 – Run Development Server

Last step, open command prompt and run the following command to start developement server:

php artisan serve

Then open your browser and hit the following url on it:

http://127.0.0.1:8000/image-upload

Recommended Laravel Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *