Laravel 11 Ajax Image Upload Example

By Hardik Savani April 16, 2024 Category : Laravel

In this tutorial, I would like to show you how to upload an image using ajax in a Laravel 11 application.

In this example, we will create an "images" table with a name column. Then, we will create a form with a file input. When you submit it, it will send the image via a jQuery ajax request and store the image in the folder and database.

So, let's look at a simple example and follow the steps below for a Laravel 11 ajax image upload example:

laravel 11 ajax image upload

Step for How to Ajax Image Upload in Laravel 11?

  • Step 1: Install Laravel 11
  • Step 2: Create Migration and Model
  • Step 3: Create Controller
  • Step 4: Create Routes
  • Step 5: Create Blade File
  • Run Laravel App

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Migration and Model

Here, we will create a migration for the "images" table. Let's run the below command and update the code.

php artisan make:migration create_images_table


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
     * Run the migrations.
     * @return void
    public function up(): void
        Schema::create('images', function (Blueprint $table) {
     * Reverse the migrations.
     * @return void
    public function down(): void

Next, run to create a new migration using Laravel's migration command as follows:

php artisan migrate

Now, we will create the Image model using the following command:

php artisan make:model Image


namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
    use HasFactory;
    protected $fillable = [

Step 3: Create Controller

In this step, we will create a new `ImageController`. In this file, we will add two methods: `index()` and `store()`, for rendering views and storing images into a folder and the database.

Let's create the `ImageController` by following this command:

php artisan make:controller ImageController

Next, let's update the following code to the Controller file.


namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Image;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class ImageController extends Controller
     * Display a listing of the resource.
     * @return \Illuminate\Http\Response
    public function index(): View
        return view('imageUpload');
     * Display a listing of the resource.
     * @return \Illuminate\Http\Response
    public function store(Request $request): JsonResponse
        // Validation
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048'
        $imageName = time().'.'.$request->image->extension();  
        $request->image->move(public_path('images'), $imageName);
        Image::create(['name' => $imageName]);
        return response()->json(['success' => 'Images uploaded successfully!']);

Store Images in Storage Folder

$image->storeAs('images', $imageName);
// storage/app/images/file.png

Store Images in Public Folder

$image->move(public_path('images'), $imageName);
// public/images/file.png

Store Images in S3

$image->storeAs('images', $imageName, 's3');

Step 4: Create Routes

Furthermore, open `routes/web.php` file and add the routes to manage GET and POST requests for rendering views and storing image logic.


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('image-upload', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('');

Step 5: Create Blade File

At the last step, we need to create an imageUpload.blade.php file. In this file, we will create a form with a file input button and write jQuery AJAX code. So, copy the code below and paste it into that file.


<!DOCTYPE html>
    <title>Laravel 11 Ajax Image Upload Example -</title>
    <link href="" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="" />
    <script src=""></script>
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Ajax Image Upload Example -</h3>
        <div class="card-body">
            <img id="preview-image" width="300px">
            <form action="{{ route('') }}" method="POST" enctype="multipart/form-data" class="mt-2" id="image-upload">
                <div class="alert alert-danger print-error-msg" style="display:none">
                <div class="mb-3">
                    <label class="form-label" for="inputImage">Select Image:</label>
                        class="form-control @error('images') is-invalid @enderror">
                        <span class="text-danger">{{ $message }}</span>
                <div class="mb-3">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
<script type="text/javascript">
    Input Change Event
        let reader = new FileReader();
        reader.onload = (e) => { 
    Form Submit Event
    $('#image-upload').submit(function(e) {
           let formData = new FormData(this);
                url: "{{ route('') }}",
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    alert('Image has been uploaded successfully');
                error: function(response){
                    $.each( response.responseJSON.errors, function( key, value ) {

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:



laravel 11 ajax image upload output

I hope it can help you...