In this tutorial, we will show you how to upload an image using Ajax in Laravel 10. We will also show you how to preview the uploaded image before submitting the form.
We will use the jQuery Form plugin to submit the form data using Ajax. We will also use the jQuery File Upload plugin to upload the image file.
Step 1: Create a Route
First, we need to create a route for our form. Open the routes/web.php file and add the following route:
Route::get(‘ajax-image-upload’, ‘ImageController@index’);
Step 2: Create a Controller
Next, we need to create a controller to handle the form submission. Execute the following command to create a controller:
php artisan make:controller ImageController
This command will create a controller file called ImageController.php in the app/Http/Controllers directory.
Step 3: Create a View File
Next, we need to create a view file to display the form. Create a file called index.blade.php in the resources/views directory and add the following code to it:
Laravel 10 Ajax Image Upload with Preview Example
In the above code, we have included the jQuery Form and jQuery File Upload plugins. We have also created a form with an input field to select the image file. We have also added a preview image element to display the uploaded image.
Step 4: Add Code to Controller
Next, we need to add the code to the controller to handle the form submission. Open the ImageController.php file and add the following code to it:
hasFile(‘image’)) { $image = $request->file(‘image’); $name = time().’.’.$image->getClientOriginalExtension(); $destinationPath = public_path(‘/images’); $image->move($destinationPath, $name); return ‘/images/’.$name; } } }
In the above code, we have defined two methods. The index() method is used to display the form. The upload() method is used to handle the form submission. It checks if the form has an image file and then uploads the image to the public/images directory.
Step 5: Add Route
Next, we need to add the route for the form submission. Open the routes/web.php file and add the following route:
Route::post(‘ajax-image-upload’, ‘ImageController@upload’)->name(‘ajax-image-upload’);
Step 6: Test the Application
Now, we can test the application. Open the terminal and execute the following command to start the development server:
php artisan serve
Now, open the browser and access the following URL:
http://localhost:8000/ajax-image-upload
You should see the form in the browser. Select an image file and click the Upload button. The image should be uploaded and previewed in the browser.
If you are looking to implement Ajax image upload functionality with a preview feature in your Laravel 10 web application, then this tutorial is for you. In this tutorial, you will learn how to upload an image using Ajax without refreshing the web page, and you will also be able to preview the uploaded image using jQuery.
Laravel 10 – Ajax Image Upload with Preview Example
By following this tutorial, you can create Ajax image upload functionality with a preview feature in Laravel 10 apps.
- Step 1 – Setup New Laravel 10 Project
- Step 2 – Setup Database with Laravel App
- Step 3 – Create Model & Migration
- Step 4 – Add Routes
- Step 5 – Generate Controller By Artisan Command
- Step 6 – Create Ajax Image Upload Form
- Step 7 – Create 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 file for form:
php artisan make:model Photo -m
After that, open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:
public function up()
{
Schema::create('photos', 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 into database:
php artisan migrate
Step 4 – Add 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\AjaxUploadController;
Route::get('image-preview', [AjaxUploadController::class, 'index']);
Route::post('upload', [AjaxUploadController::class, 'store']);
Step 5 – Generate 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 AjaxUploadController
After that, go to app/http/controllers and open AjaxUploadController.php file. And update the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Photo;
class AjaxUploadController extends Controller
{
public function index()
{
return view('image-upload-preview-form');
}
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 Photo;
$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, create ajax image upload with preview form in blade view file to displa image preview before upload upload to database and folder.
So, Go to resources/views and create image-upload-preview-form.blade.php and update the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Ajax Image Upload With Preview - 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 with Preview 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 mb-2">
<img id="preview-image-before-upload" src="https://www.riobeauty.co.uk/images/product_image_not_found.gif"
alt="preview image" style="max-height: 250px;">
</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').change(function(){
let reader = new FileReader();
reader.onload = (e) => {
$('#preview-image-before-upload').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
$('#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 Images Directory inside Storage/app/public
Now, create images directory inside storage/app/public directory. Because the following line of code will upload an image into the images directory, which is located inside storage/app/public/ directory.
Step 8 – Run Development Server
Last step, open command prompt and run the following command to start developement server:
php artisan serve
Then open your browser and hit the following url on it:
http://127.0.0.1:8000/image-preview
Conclusion
By following this tutorial, you will gain a comprehensive understanding of how to implement Ajax image upload functionality with a preview feature in Laravel 10. This will allow you to provide a seamless and interactive user experience when uploading and previewing images in your web application.
