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

Laravel 5 Tutorial tutorial for beginners : How to create Image Upload and Resize using Image Intervention with Validation in Laravel 5.3 for beginners

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>

More Laravel Video's Tutorial For Beginners :



Download this project from this LINK.

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Laravel 5 Tutorial : Image Upload and Resize using Image Intervention with Validation in Laravel 5.3
Laravel 5 Tutorial : Image Upload and Resize using Image Intervention with Validation in Laravel 5.3
Laravel 5 Tutorial tutorial for beginners : How to create Image Upload and Resize using Image Intervention with Validation in Laravel 5.3 for beginners
https://i.ytimg.com/vi/LPkOYU1Nkk8/hqdefault.jpg
https://i.ytimg.com/vi/LPkOYU1Nkk8/default.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/12/laravel-5-tutorial-image-upload-resize.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/12/laravel-5-tutorial-image-upload-resize.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy