Laravel 9 Image File Upload Example

In this section we will how to upload image file with validation in laravel 9. laravel provide own file Storage system that mean you don't need to install third party package. For this section we will use tailwind css 3 and laravel 9.


Laravel 9 image upload Tutorial

Step 1: Create Laravel Project

Step 2: Setup Databases

Step 3: Create Image Model , Migration , Controller and Routes

Step 4: Create Blade File

Step 5: Migrate database & Storage links

Step 6: Run the Server


Step 1: Create Laravel Project

Run below command in your terminal to create laravel project.

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


Step 2: Setup Databases

Now, fill the details in env file.

.env

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 Image Model , Migration , Controller and Routes

Run shorthand command to create image modal, migration and controller.

php artisan make:model Image -mc 


images_table.php

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


app/Models/Image.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;
    protected $fillable = [
        'image'
    ];
}


app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

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

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

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

        $image_path = $request->file('image')->store('image', 'public');

        $data = Image::create([
            'image' => $image_path,
        ]);

        session()->flash('success', 'Image Upload successfully');

        return redirect()->route('image.index');
    }
}


web.php

<?php

use App\Http\Controllers\ImageController;
use Illuminate\Support\Facades\Route;

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



Step 4: Create Blade File

views/image.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>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>

        <div class="relative flex items-center min-h-screen justify-center overflow-hidden">
            <form action="{{ route('image.store') }}" method="POST" class="shadow p-12" enctype="multipart/form-data">
                @csrf
                <label class="block mb-4">
                    <span class="sr-only">Choose File</span>
                    <input type="file" name="image"
                        class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
                    @error('image')
                    <span class="text-red-600 text-sm">{{ $message }}</span>
                    @enderror
                </label>
                <button type="submit" class="px-4 py-2 text-sm text-white bg-indigo-600 rounded">Submit</button>
            </form>
        </div>

    </body>

</html>


Step 5: Migrate database & Storage links

run migrate database

php artisan migrate

Storage links to public directory.

php artisan storage:link


Step 6: Run the Server

php artisan serve


http://localhost:8000/image

laravel 9 image file upload

laravel 9 image file upload


Tags: