Laravel 8 intervention image upload and resize example. In this post, i will show you how to upload and resize image using intervention package in laravel 8 app.
As well as resize image by using intervention image and save to storage directory.
In this post example, i will create image intervention upload form in laravel 8. And resize image before upload to public storage directory using intervention image in laravel 8.
Laravel 8 Intervention Image Upload and Resize Tutorial
Simple steps to preview image before upload in laravel 8 app:
- Step 1 – Install Laravel 8 Application
- Step 2 – Configuring Database Details
- Step 3 – Install Intervention and Configure it
- Step 4 – Create Image Model & Migration
- Step 5 – Create Routes
- Step 6 – Creating Controller
- Step 7 – Create Image Upload Form
- Step 8 – Start Development Server
- Step 9 – Run This App On Browser
Step 1 – Install Laravel 8 Application
In step 1, open your terminal and navigate to your local web server directory using the following command:
//for windows user cd xampp/htdocs //for ubuntu user cd var/www/html
Then install laravel 8 latest application using the following command:
composer create-project --prefer-dist laravel/laravel LaravelImageIntervention
Step 2 – Configuring Database Details
In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:
Step 3 – Install Intervention and Configure it
In step 3, open command prompt and navigate to your project by using the following command:
cd / LaravelImageUploadPreview
Then execute the following command to install image intervention package:
composer require intervention/image
Then, register alieses and provider in app.php, which is locted inside config directory:
config/app.php 'providers' => [ Intervention\Image\ImageServiceProvider::class ], 'aliases' => [ 'Image' => Intervention\Image\Facades\Image::class ]
Step 4 – Create Image Model & Migration
Then create model and migration file by using the following command:
php artisan make:model Image -m
The above command will create two files into your laravel 8 image upload tutorial app, which is located inside the following locations:
- LaravelImageIntervention/app/Models/Photo.php
- LaravelImageIntervention/database/migrations/create_photos_table.php
So, find create_photos_table.php file inside LaravelImageIntervention/database/migrations/ directory. Then open this file and add the following code into function up() on this file:
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 5 – Create Routes
In step 5, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
Step 6 – Creating Controller
In step 6, create image upload controller by using the following command:
php artisan make:controller ImagUploadController
The above command will create ImagUploadController.php file, which is located inside LaravelImageIntervention/app/Http/Controllers/ directory.
The following laravel validation rules will validate image file before upload/save into database:
So open ImagUploadController.php file and add the following code into it:
Step 7 – Create Image Upload Form
In step 7, create new blade view file that named image-intervention.blade.php inside resources/views directory.
Note that, the following code display error message in laravel 8 image intervention forms. So do not forget to add the following code along laravel forms fields:
So, you can add the following php and html form code into image-intervention.blade.php:
Step 8 – Start Development Server
Finally, open your command prompt again and run the following command to start development server for your laravel 8 intervention image upload application:
php artisan serve
Step 9 – Run This App On Browser
In step 9, open your browser and fire the following url into your browser:
http://127.0.0.1:8000/image-intervention