How to Crop and Upload Image in Laravel 8 using jQuery and Ajax

How to Crop and Upload Image in Laravel 8 using jQuery and Ajax

Learn how to crop and upload image in Laravel 8 using jQuery and Ajax. Learn how to crop image before upload using jQuery and Ajax in Laravel 8 app. Image crop and save into database using jQuery and Ajax in Laravel 8.

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', '[email protected]');

Route::post('save-crop-image', '[email protected]');

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

PHP Web Application Development Company

As a top **PHP Web Application Development Company in USA**[https://www.dataeximit.com/php-development-services/](https://www.dataeximit.com/php-development-services/ "https://www.dataeximit.com/php-development-services/"), we at Data EximIT have...

PHP Website Development

Skenix Infotech is a leading PHP Web Development Company that helps companies get results with industry best practices. Get affordable PHP Development Services.

Laravel Development Company

Skenix Infotech is a top Laravel Website Development Company with Expert Laravel Developers that provides robust Laravel Development Services at fair costs.

Php how to delete multiple rows through checkbox using ajax in laravel

In this article i will let you know to delete multiple rows through checkbox using ajax in laravel and before delete we will give a confirmation message.

Hire Dedicated PHP Developer

Looking to hire affordable yet experienced PHP developers? **[Hire Dedicated PHP Developer](https://hourlydeveloper.io/hire-dedicated-php-developer/ "Hire Dedicated PHP Developer")**, who can convert your idea to reality, within the stipulated...