Story

Image Intervention Tutorial With Example in Laravel

Comment (0)

Admin

319

Step 1: Install Laravel Fresh Project

composer create-project laravel/laravel example-app

Step 2: Install Intervention Image Package

composer require intervention/image

config/app.php

<?php
  
return [
    ...
    ...
    'providers' => [
        ...
        Intervention\Image\ImageServiceProvider::class
    ],
    'aliases' => Facade::defaultAliases()->merge([
        ...
        'Image' => Intervention\Image\Facades\Image::class
    ])
]

Step 3: Create Routes

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageController;
  
/*
|--------------------------------------------------------------------------
| 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::controller(ImageController::class)->group(function(){
    Route::get('image-upload', 'index');
    Route::post('image-upload', 'store')->name('image.store');
});

How to generate PDF file in Laravel

Step 4: Create ImageController

app/Http/Controllers/ImageController.php

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Image;
use App\Models\ImageUpload;

    
class ImageController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('imageUpload');
    }
        
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $image = $request->file('image');

        if($image) {
            $imageName= uniqid().'.'.$image->getClientOriginalExtension();
            Image::make($image)->resize(685,200)->save('public/backend/images/banner/'.$imageName);
            $upload_image='public/backend/images/banner/'.$imageName;
        
        $data = new ImageUpload;
        $data->image = $upload_image;
        $data->save();
        return Redirect()->back();
        }
    }
}

Step 5 : Create blade file

resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html lang="">
    <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Multiple image upload by nijwel.xyz</title>

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

	</head>
	<body>
		<section class="container" >
			<div class="card p-2">
				<div class="card-header bg-info">
					<h1 class="text-center p-4">Image Intervention Tutorial With Example by nijwel.xyz</h1>
				</div>
				<div class="card-body mt-5">
					<div class="mb-3">
					  <label for="formFileMultiple" class="form-label">Image</label>
					  <input class="form-control" name="image" type="file" id="formFileMultiple" multiple>
					</div>
				</div>
			</div>
		</section>

		<!-- jQuery -->
		<script src="//code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 		<script src="Hello World"></script>
	</body>
</html>