How to upload image in laravel 12

Install Laravel 12 App

Run below this command


composer create-project laravel/laravel example-app

Setup mysql database

update .env file


DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel12app
DB_USERNAME=root
DB_PASSWORD=

create route

routes/web.php like as below code


<?php

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

Route::get('/', function () {
    return view('welcome');
});


Route::controller(ImageUploadController::class)->group(function () {
    Route::get('/upload-image', 'index')->name('upload.index');
    Route::post('/upload-image', 'store')->name('upload.store');  
});

  
});

create Model and Migration file

Run below this command


php artisan make:model ImageUpload -m

app\Models\ImageUpload.php like as below code


<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class ImageUpload extends Model
{
    protected $fillable = [
        'name',
        'file',
    ];

    public static function getData()
    {
        $data = self::get();
        return $data;
    }

    public static function createData($name, $path)
    {
        self::create([
            'name' => $name,
            'file' => $path,
        ]);
    }
}

database\Migrations\2025_03_04_064931_create_image_uploads_table.php like as below 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.
     */
    public function up(): void
    {
        Schema::create('image_uploads', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('file');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('image_uploads');
    }
};

Create controller


php artsan make:controller ImageUploadController

app\Http\Controllers\ImageUploadController.php like as below code


<?php

namespace App\Http\Controllers;

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

class ImageUploadController extends Controller
{
    public function index()
    {
        $data = ImageUpload::getData();
        return view('upload.index')->with('data', $data);
    }   

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        $name = $request->name;
        $file = $request->file('file');
        $path = $file->store('uploads', 'public');
        ImageUpload::createData($name, $path);
        return redirect()->back()->with('message', 'image successfully uploaded.');
    }

}

Create blade file

resource\upload\index.blade.php like as below code


<!DOCTYPE html>
<html lang="en">

<head>
<title>Laravel 12 Image Upload Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/
css/bootstrap.min.css" 
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/
dist/js/bootstrap.bundle.min.js"
></script>
</head>

<body>
<div class="container mt-3">
<div class="card">
<div class="card-header">
<h2>Laravel 12 Image Upload Example</h2>
</div>
 <div class="card-body">
 @if (session()->has('message'))
<div class="alert alert-success" role="alert">
{{ session()->get('message') }}</div>
@endif
<form action="{{ route('upload.store') }}" method="post" 
enctype="multipart/form-data">
 @csrf
<div class="mb-3 mt-3">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" id="name"
placeholder="Enter name"
name="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Upload image</label>
<input type="file" class="form-control" id="file" name="file">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="card-footer text-end"><a
href="https://www.laravelexample.com/"
target="_blank">www.laravelexample.com</a></div>
</div>

<div class="card mt-5">
<div class="card-header">
<h2>Uploaded Image</h2>
</div>
<div class="card-body">
@if ($data->count() > 0)
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Image</th>
</thead>
<tbody>
@foreach ($data as $d)
<tr>
<td>{{ $d->id }}</td>
<td>{{ $d->name }}</td>
<td> <img src="storage/{{ $d->file }}" 
class="img-fluid"></td>
<td>{{ $d->phone }}</td>
<td>{{ $d->address }}</td>
</tr>
@endforeach
@else
<p class="text-center">Record not found.</p>
@endif
</tbody>
</table>
</div>
</div>
</body>
</html>