Laravel Ajax Image Upload With Intervention Package

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
Laravel Ajax Image Upload With Intervention Package

Hi Dev’s,
Today on this blog, I will show you how to store file by using Intervention Package in laravel 8 applications. Now in this blog I will shows you how we can upload the image into the database and folder also with a short example

So we can upload the image into the folder and also store into database by using jquery ajax in laravel 8 application.

Just We need to follow the bellow step.

Step 1 : Install Laravel project

Now in this step we need to install fresh laravel project by using bellow command.

composer create-project --prefer-dist laravel/laravel blog
Step 2 : Install Image Intervention Package

Then now we need to install the laravel image intervention package for resizing the upload image size. By use the below command we can install it.

composer  require intervention/image 

After the successfully install a laravel image intervention package. Then Register image intervention package to providers and aliases go to app/config/app.php then register here.

'providers' => [
    Intervention\Image\ImageServiceProvider::class
 ],

 'aliases' => [
    'Image' => Intervention\Image\Facades\Image::class
 ] 
Step 3 : Create Migration & Model

So now you can run bellow command to create migration and model in laravel app.

php artisan make:model Photo -m

By using above command to create one table migration file and also one model file.

database/migrations/2019_12_11_111847_create_photos_table.php

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->increments('id');
            $table->string('photo_name');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}

By using bellow command to use migrate your table.

php artisan migrate
Step 4 : Create Controller

Now in this step need to create controller file by use bellow command.

php artisan make:controller ImageController
Step 5 : Create Controller method

So Create controller after you can put the bellow code in your controller file.

app/http/controllers/ImageController

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Validator,Redirect,Response,File;
Use Image;
Use App\Photo;
use Intervention\Image\Exception\NotReadableException;
 
 
class ImageController extends Controller
{
 
    public function create()
    {
        return view('image');
    }
 
    public function store(Request $request)
    {
        request()->validate([
           'photo_name' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
 
        if ($files = $request->file('photo_name')) {
     
            // for save original image
            $ImageUpload = Image::make($files);
            $originalPath = 'public/images/';
            $ImageUpload->save($originalPath.time().$files->getClientOriginalName());
     
            // for save thumnail image
            $thumbnailPath = 'public/thumbnail/';
            $ImageUpload->resize(250,125);
            $ImageUpload = $ImageUpload->save($thumbnailPath.time().$files->getClientOriginalName());
 
            $photo = new Photo();
            $photo->photo_name = time().$files->getClientOriginalName();
            $photo->save();
        }
 
        $image = Photo::latest()->first(['photo_name']);
        return Response()->json($image);
    }
}
Step 6 : Create Routes

So now in this step we need create route in web.php file.

routes/web.php

Route::get('image','ImageController@create')->name('image.create');
Route::post('save-image','ImageController@store')->name('image.store');
Step 7 : Create View File

Now in this step we need create blade file in laravel app.

resources/views/create.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel Ajax Image Upload Using Intervention Package Example - Tutsmake.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <style>
        .avatar-pic {
             width: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3 style="margin-top: 12px;" class="text-center alert alert-success">Laravel 5.7 Ajax Image Upload Using Intervention Package Example - <a href="https://www.tutsmake.com" target="_blank">TutsMake</a></h3>
        <br>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form id="imageUploadForm" action="javascript:void(0)" enctype="multipart/form-data">
                    <div class="file-field">
                        <div class="row">
                            <div class=" col-md-8 mb-4">
                                <img id="original" src="" class=" z-depth-1-half avatar-pic" alt="">
                                <div class="d-flex justify-content-center mt-3">
                                    <div class="btn btn-mdb-color btn-rounded float-left">
                                        <input type="file" name="photo_name" id="photo_name" required=""> <br>
                                        <button type="submit" class="btn btn-secondary d-flex justify-content-center mt-3">submit</button>
                                    </div>
                                </div>
                            </div>
                            <div class=" col-md-4 mb-4">
                                <img id="thumbImg" src="" class=" z-depth-1-half thumb-pic" alt="">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function (e) {
            $('#imageUploadForm').on('submit',(function(e) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                e.preventDefault();
                var formData = new FormData(this);
 
                $.ajax({
                    type:'POST',
                    url: "{{ route('photo.store') }}",
                    data:formData,
                    cache:false,
                    contentType: false,
                    processData: false,
                    success:function(response){
                        $('#original').attr('src', 'public/images/'+ response.image);
 
                        $('#thumbImg').attr('src', 'public/thumbnail/'+ response.image);
                    },
                    error: function(data){
                        console.log(data);
                    }
                });
            }));
        });
 
    </script> 
</body>
</html>

Read Also : Laravel Favorite System Example

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →