Crop and save image using jQuery in laravel 8. In this tutorial, you will learn how to crop image before upload using jquery and ajax in laravel 8 app.

This tutorial will help you step by step on how to crop image and save to database using jQuery and ajax in laravel 8 app.

Crop and Save Image using jQuery and Ajax in Laravel 8

• Step 1 – Install Laravel 8 App
• Step 2 – Connecting App to Database
• Step 3 – Create Crop Image Migration & Model
• Step 4 – Add Routes For Crop Image Upload
• Step 5 – Create Crop Image Controller Using Command
• Step 6 – Create Crop Image Upload Blade View
• Step 7 – Make Upload Folder
• Step 8 – Run Development Server
• Step 9 – Test This App

Step 1 – Install Laravel 8 App

First of all, open terminal and execute the following command to install or download laravel app for laravel 8 app for create crop image before upload using jQuery and ajax:

cd xampp\htdocs

Then

composer create-project --prefer-dist laravel/laravel Blog

Step 2 – Connecting App to Database

In this step, Navigate to downloaded laravel 8 app root directory and open .env file. Then add your database details in .env file, as follow:

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here

Step 3 – Create Crop Image Migration & Model

In this step, execute the following command on terminal to create one model and migration file for save crop image. So, open a command prompt and execute the following command:

php artisan make:model Image -m

After that, Navigate to database/migrations folder and open create_images_table.php. Then update the following code into create_images_table.php:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateGalleriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

Now, open again cmd and run the following command to migrate the table into your select database:

php artisan migrate

Step 4 – Add Routes For Crop Image Upload

In this step, Navigate to the /routes folder and open web.php file. Then update the following routes into your web.php file:

Route::get('image-crop', 'CropImageUploadController@index');

Route::post('save-crop-image', 'CropImageUploadController@store');

Step 5 – Create Crop Image Controller Using Command

In this step, open terminal and execute the following command to create ajax file upload controller file:

php artisan make:controller CropImageUploadController

Next, Navigate to app/http/controllers/ folder and open CropImageUploadController.php. Then add the following file uploading methods into your CropImageUploadController.php file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Image;

class CropImageUploadController extends Controller
{
    public function index()
    {
     return view('image-crop');
    }

    public function store(Request $request)
    {
        $folderPath = public_path('upload/');

        $image_parts = explode(";base64,", $request->image);
        $image_type_aux = explode("image/", $image_parts[0]);
        $image_type = $image_type_aux[1];
        $image_base64 = base64_decode($image_parts[1]);

        $imageName = uniqid() . '.png';

        $imageFullPath = $folderPath.$imageName;

        file_put_contents($imageFullPath, $image_base64);

         $saveFile = new Image;
         $saveFile->title = $imageName;
         $saveFile->save();

        return response()->json(['success'=>'Crop Image Saved/Uploaded Successfully using jQuery and Ajax In Laravel']);
    }
}

#ajax #jquery #laravel #php #web-development