article

Tuesday, April 8, 2025

Laravel 12 Resize Image Upload

Laravel 12 Resize Image Upload

Download Laravel App

https://laravel.com/docs/12.x/installation

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel12dev
DB_USERNAME=root
DB_PASSWORD=root

Create tables Model
php artisan make:model Product -m
myapp>php artisan make:model Product -m

Open new products migrations
yourproject/database/migrations
laravelproject\database\migrations\_create_products_table.php

//laravelproject\database\migrations\_create_products_table.php
<?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('products', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('price');
            $table->text('description');
            $table->string('photo');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};
Database Migration
php artisan migrate

myapp>php artisan migrate
Migration table created successfully.
check database table

Creating Controller

php artisan make:controller ProductController
myapp>php artisan make:controller ProductController
change it with the following codes:
myapp\app\Http\Controllers\ProductController.php
//myapp\app\Http\Controllers\ProductController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Intervention\Image\Laravel\Facades\Image;
use App\Models\Product;

class ProductController extends Controller
{
    public function index(): View
    {
        return view('home');
    }

    public function create(): View
    {
        return view('create');
    }

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

        $image = $request->file('image');
        $imageName = time() . '.' . $image->extension();

        $destinationPathThumbnail = public_path('images/thumbnail');
        $img = Image::read($image->path()); //composer require intervention/image-laravel
        $img->resize(100, 100, function ($constraint) {
            $constraint->aspectRatio();
        })->save($destinationPathThumbnail . '/' . $imageName);

        $destinationPath = public_path('/images');
        $image->move($destinationPath, $imageName);

        $insert = new Product();
        $insert->title = $request->title;
        $insert->price = $request->price;
        $insert->description = $request->description;
        $insert->photo = $imageName;
        $insert->save();

        return back()->with('success', 'Image Uploaded successfully!')
            ->with('imageName', $imageName);
    }
}
Install Intervention Image Package
myapp>composer require intervention/image-laravel

Create Views
myapp\resources\views\create.blade.php
//myapp\resources\views\create.blade.php
<!DOCTYPE html>
<html>

<head>
    <title>Laravel 12 Resize Image Upload</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>

<body>
    <div class="container">

        <div class="card mt-5">
            <h3 class="card-header p-3">Laravel 12 Resize Image Upload</h3>
            <div class="card-body">

                @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                @session('success')
                <div class="alert alert-success" role="alert">
                    {{ $value }}
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <strong>Original Image:</strong>
                        <br />
                        <img src="/images/{{ Session::get('imageName') }}" width="300px" />
                    </div>
                    <div class="col-md-4">
                        <strong>Thumbnail Image:</strong>
                        <br />
                        <img src="/images/thumbnail/{{ Session::get('imageName') }}" />
                    </div>
                </div>
                @endsession

                <form action="{{ route('create.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row mb-3">
                        <div class="col">
                            <input type="text" name="title" class="form-control" placeholder="Title">
                            @error('title')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <input type="text" name="price" class="form-control" placeholder="Price">
                            @error('price')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col">
                            <textarea class="form-control" name="description" placeholder="Descriptoin"></textarea>
                        </div>
                    </div>

                    <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"><i class="fa fa-save"></i> Upload</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</body>

</html>
app/models/Product.php
//app/models/Product.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'title',
        'price',
        'description',
        'photo'
    ];
}
myapp\routes\web.php
//myapp\routes\web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;

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

Route::get('create', [ProductController::class, 'create']);
Route::post('create-upload', [ProductController::class, 'store'])->name('create.store');
Run myapp>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Related Post