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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
//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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//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
?
1
2
3
4
5
6
7
8
9
10
//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

Posted by ednalan at 10:52 PM . Under .

Related Post