Introduction
In this tutorial, we will learn how to upload images using Ajax in Laravel 10. We will use the jQuery Form plugin to submit the form data via Ajax. We will also use the Intervention Image library to resize and crop the uploaded images.
Prerequisites
Before starting this tutorial, you should have a basic understanding of the following:
Laravel 10
jQuery
Ajax
Intervention Image library
Step 1 – Install Laravel 10
First, we need to install the latest version of Laravel 10. To do this, open a terminal window and run the following command:
composer create-project –prefer-dist laravel/laravel laravel10
Step 2 – Install Intervention Image Library
Next, we need to install the Intervention Image library. To do this, run the following command in the terminal window:
composer require intervention/image
Step 3 – Create a Model and Migration
Now, we need to create a model and migration for our images. To do this, run the following command in the terminal window:
php artisan make:model Image -m
This will create a model and migration for our images.
Step 4 – Configure the Database
Next, we need to configure the database. To do this, open the .env file and update the database credentials.
Step 5 – Create a Controller
Now, we need to create a controller for our images. To do this, run the following command in the terminal window:
php artisan make:controller ImageController
This will create a controller for our images.
Step 6 – Create a Route
Next, we need to create a route for our images. To do this, open the routes/web.php file and add the following route:
Route::post(‘/upload-image’, ‘ImageController@uploadImage’);
Step 7 – Create a View
Now, we need to create a view for our images. To do this, create a file named upload.blade.php in the resources/views directory and add the following code:
Laravel 10 Image Upload using Ajax Tutorial
Step 8 – Create a Method in the Controller
Next, we need to create a method in the controller for uploading the images. To do this, open the ImageController.php file and add the following method:
public function uploadImage(Request $request) { if($request->hasFile(‘image’)) { $image = $request->file(‘image’); $filename = time() . ‘.’ . $image->getClientOriginalExtension(); $location = public_path(‘images/’ . $filename); Image::make($image)->resize(800, 400)->save($location); return ‘
‘; } return ‘No image uploaded’; }
Step 9 – Test the Application
Finally, we can test the application. To do this, open a browser and navigate to http://localhost:8000/upload. You should see the upload form. Select an image and click the Upload Image button. The image should be uploaded and displayed on the page.
Conclusion
In this tutorial, we learned how to upload images using Ajax in Laravel 10. We used the jQuery Form plugin to submit the form data via Ajax and the Intervention Image library to resize and crop the uploaded images.
Sometimes, you need to upload images without refreshing the page in your web applications. So, in this tutorial, you will learn how to upload images using jquery Ajax in laravel 10 web apps.
How to upload image using Ajax in Laravel 10
By using the following steps, you can upload images using ajax jquery in laravel 10 web applications; is as follows:
- Step 1 – Setup New Laravel 10 Project
- Step 2 – Setup Database with Laravel App
- Step 3 – Create Model & Migration
- Step 4 – Define Routes
- Step 5 – Create Controller By Artisan Command
- Step 6 – Create Ajax Image Upload Form
- Step 7 – Create an Images Directory inside Storage/app/public
- Step 8 – Run Development Server
Step 1 – Setup New Laravel 10 Project
First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel LaravelImage
Step 2 – Setup Database with Laravel App
In this step, Configure your database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password
Step 3 – Create Model & Migration
In this step, open again your command prompt. And run the following command on it. To create model and migration:
php artisan make:model Image -m
After that, open create_images_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('path');
$table->timestamps();
});
}
Then, open again command prompt and run the following command to create tables in database:
php artisan migrate
Step 4 – Define Routes
In this step, Visit your routes directory and open web.php file in any text editor. And add the following routes into web.php route file:
use App\Http\Controllers\AjaxImageUploadController;
Route::get('image-upload-ajax', [AjaxImageUploadController::class, 'index']);
Route::post('upload', [AjaxImageUploadController::class, 'store']);
Step 5 – Create Controller By Artisan Command
In this step, execute the following command on terminal/command prompt/command line to create controller file for your laravel applications; is as follow:
php artisan make:controller AjaxImageUploadController
After that, go to app/http/controllers and open AjaxImageUploadController.php file. And update the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
class AjaxImageUploadController extends Controller
{
public function index()
{
return view('image-upload-ajax');
}
public function store(Request $request)
{
$validatedData = $request->validate([
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
]);
$name = $request->file('image')->getClientOriginalName();
$path = $request->file('image')->store('public/images');
$save = new Image;
$save->name = $name;
$save->path = $path;
$save->save();
return response()->json($path);
}
}
The following line of code will upload an image into the images directory:
$path = $request->file('image')->store('public/images');
Step 6 – Create Ajax Image Upload Form
Now, you need to create Ajax image upload form on the blade view file to upload image into database and server directoryu.
So, Go to resources/views and create image-upload-ajax.blade.php and update the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Ajax Image Upload Tutorial - Tutsmake.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container mt-4">
<h2 class="text-center">Image Upload using jQuery Ajax in Laravel 10 - Tutsmake.com</h2>
<form method="POST" enctype="multipart/form-data" id="image-upload" action="javascript:void(0)" >
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="image" placeholder="Choose image" id="image">
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#image-upload').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: "{{ url('upload')}}",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
this.reset();
alert('Image has been uploaded using jQuery ajax successfully');
},
error: function(data){
console.log(data);
}
});
});
});
</script>
</div>
</body>
</html>
Step 7 – Create an Images Directory inside Storage/app/public
Now, create an images directory inside the storage/app/public directory. Because the following line of code will upload an image into the images directory, which is located inside the storage/app/public/ directory.
Step 8 – Run Development Server
The last step, open the command prompt and run the following command to start the development server:
php artisan serve
Then open your browser and hit the following URL on it:
http://127.0.0.1:8000/image-upload-ajax
Conclusion
By following this tutorial, you have learned how to implement Ajax image upload functionality to upload images without refreshing the whole web page in laravel 10 apps.
