Sometimes developers might need to implement the functionality to get thumbnail of any images. To achieve this, we can use jQuery to crop the images and upload the thumbnail on the server.
Here at Fixwebnode, as part of our Website Development Services, we regularly help our Customers to perform related Laravel queries.
In this context, we shall look into how to crop image and save to database using jQuery and ajax in laravel 8 application.

Steps to Crop and Save Image using jQuery and Ajax in Laravel 8

1. Install New Laravel 8 Application
To begin, open your terminal and execute the following commands to install or download laravel application to create crop image before upload using jQuery and ajax.
First go to the "htdocs" directory:
$ cd xampp\htdocs
Then create a Laravel project:
$ composer create-project --prefer-dist laravel/laravel Blog

2. Configure the Application with a database
Here, Navigate to downloaded laravel 8 application 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=The database name here DB_USERNAME=The database username here
DB_PASSWORD=The database password here

3. Create Crop Image Migration and Model
Here, execute the following command on terminal to create one model and migration file to save crop image. To do this, open a command prompt and execute the following command:
$ php artisan make:model Image -m
Next, Navigate to database/migrations folder and open create_images_table.php. Then update the following code into create_images_table.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 the terminal prompt and run the following command to migrate the table into your select database:
$ php artisan migrate

4. Add Routes For Crop Image Upload
Here, 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');

5. Create Crop Image Controller
Here, 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:
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']);
}
}

6. Create Crop Image Upload Blade View
Here, create one blade view file named image-crop.blade.php.
To do this, navigate /resources/views and create one file name image-crop.blade.php. Then update the following code into your image-crop.blade.php file:

7. Create Upload Folder
Now, open public directory and create one folder name upload.

8. Run Development Server
Now, Execute the following command to start the development server for your crop and resize image before upload laravel 8 application:
$ php artisan serve
If you want to run the project diffrent port so use this below command
$ php artisan serve --port=8080

9. Test the Application
Now, open your browser and hit the following URLs into it:
http://localhost:8000/image-crop
OR try on your browser:
http://localhost/blog/public/image-crop

[Need help in fixing Laravel Application issues? We can help you. ]