Laravel 10 Ajax Image Upload Preview Example


Laravel 10 Ajax Image Upload Preview Example

Implementing image upload functionality with preview using Ajax in a Laravel application is a seamless way to enhance the user experience. In this example, we'll demonstrate how to create an Ajax-based image upload preview feature in Laravel 10.

Step 1: Set Up the Laravel Project

Create a new Laravel 10 project using Composer:

composer create-project laravel/laravel image-upload-preview-example
cd image-upload-preview-example

Step 2: Create a Controller and Routes

Create a new controller that handles the image upload and preview:

php artisan make:controller ImageUploadController

In the generated ImageUploadController.php file, implement the methods to handle image upload and preview:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageUploadController extends Controller
    public function index()
        return view('image-upload');

    public function upload(Request $request)
        $image = $request->file('image');
        $imageName = time() . '.' . $image->extension();
        $image->move(public_path('uploads'), $imageName);

        return response()->json(['image_url' => asset('uploads/' . $imageName)]);

Define the routes in routes/web.php:

use App\Http\Controllers\ImageUploadController;

Route::get('/image-upload', [ImageUploadController::class, 'index']);
Route::post('/upload', [ImageUploadController::class, 'upload']);

Step 3: Create the View

Create a view file named image-upload.blade.php in the resources/views directory:

<!DOCTYPE html>
    <title>Laravel 10 Ajax Image Upload Preview</title>
    <script src=""></script>
    <h1>Laravel 10 Ajax Image Upload Preview</h1>
    <form id="imageUploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="image" id="imageInput" accept="image/*">
        <button type="submit">Upload</button>
    <div id="imagePreview"></div>

        $(document).ready(function() {
            $('#imageUploadForm').submit(function(event) {
                var formData = new FormData(this);

                    url: '/upload',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        var imageUrl = response.image_url;
                        $('#imagePreview').html('<img src="' + imageUrl + '" alt="Preview">');

Step 4: Create an "uploads" Directory

Create an "uploads" directory in the public folder to store the uploaded images:

mkdir public/uploads

Step 5: Start the Development Server

Start the Laravel development server and access the application in your web browser:

php artisan serve

Visit in your browser to access the image upload page. Choose an image to upload, and it will be displayed as a preview below the upload button.