tut-laravel: Laravel 5 Tutorial : Image Upload and Resize using Image Intervention with Validation in Laravel 5.3

Laravel 5.3 Tutorial - How to create Image Upload and Resize using Image Intervention with Validation in Laravel 5.3, this lesson will show you how to create simple upload image to public folder before Resize it using Image Intervention. At the previews lessons, we have learn how to create Ajax Image Upload. So please read :

Simple Image upload using Ajax in laravel 5.3

Video Tutorial Simple Upload and Resize Image in laravel 5.3

FULL SOURCE CODE

Here is full source code Image Upload and Resize using Image Intervention Project's

Installation Image Intervention Laravel

System Requirements

Intervention Image requires the following components to work correctly.

PHP >= 5.4
Fileinfo Extension

And one of the following image libraries.

GD Library (>=2.0) … or …
Imagick PHP extension (>=6.5.7)

Install using Composer

composer require intervention/image

After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines.

In the $providers array add the service providers for this package.


...........
'Intervention\Image\ImageServiceProvider',
...........

Add the facade of this package to the $aliases array.


...........
'Image' => 'Intervention\Image\Facades\Image',
...........

Publish configuration in Laravel 5

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

Controller (ImagesController.php)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Image;

class ImagesController extends Controller
{
    public function getImage()
    {
      return view('upload-images');
    }

    public function postImage(Request $request)
    {
      $this->validate($request,[
        'image_file' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:1024',
      ]);
      $image_file = $request->file('image_file');
      $imagename = time().'.'.$image_file->getClientOriginalExtension();
      $destinationPath = public_path('/thumbnail_images');
      $thumb_img = Image::make($image_file->getRealPath())->resize(100, 100);
      $thumb_img->save($destinationPath.'/'.$imagename,80);

      $destinationPath = public_path('/images');
      $image_file->move($destinationPath, $imagename);
      // you can add more function to save image into database,
      // see it on the previews video, links will vaillable on desc
      return back()->with('success','Image Upload successful')->with('imagename',$imagename);
    }
}

Routes (web.php)

Route::get('resizeImage',['as'=>'getimage','uses'=>'ImagesController@getImage']);
Route::post('resizeImage',['as'=>'postimage','uses'=>'ImagesController@postImage']);

Views (upload-images.blade.php)

<!DOCTYPE html>
<html lang="en">
  <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>Simple images Upload</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h2>Simple Laravel 5.3 Image upload</h2>
        </div>
        <div class="panel-body">
          @if (count($errors) > 0)
            <div class="alert alert-danger">
              @foreach ($errors->all() as $error)
                <p class="error_item">{{ $error }}</p>
              @endforeach
            </div>
          @endif
          @if (Session::get('success'))
            <div class="row">
              <div class="col-md-12">
                <div class="col-md-4">
                  <strong>Image Before Resize:</strong>
                </div>
                <div class="col-md-8">
                  <img src="{{asset('images/'.Session::get('imagename')) }}" />
                </div>
              </div>
              <div class="col-md-12">
                <div class="col-md-4">
                  <strong>Image after Resize:</strong>
                </div>
                <div class="col-md-8">
                  <img src="{{asset('thumbnail_images/'.Session::get('imagename')) }}" />
                </div>
              </div>
            </div>
          @endif
          {!! Form::open(array('route' => 'postimage','files'=>true)) !!}
            <div class="row">
              <div class="col-md-6">
                <br/>
                {!! Form::file('image_file', array('class' => 'form-control')) !!}
              </div>
              <div class="col-md-6">
                <br/>
                <button type="submit" class="btn btn-success">Upload Image</button>
              </div>
            </div>
          {!! Form::close() !!}
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

tut-laravel

Thứ Hai, 26 tháng 12, 2016

Laravel 5 Tutorial : Image Upload and Resize using Image Intervention with Validation in Laravel 5.3