Sometimes, you need to upload images without refreshing the page in your laravel web applications.
So, in this tutorial, you will learn how to upload and save images into database and directory using jquery Ajax in laravel 10 web apps without refresh the web page.
How to upload image using Ajax in Laravel 10
By using the following steps, you can upload and save images into database & directory using ajax jquery in laravel 10 web applications without refresh the whole web page; 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.
