Laravel 9 Ajax Image Upload With Preview Example

Hello Artisan 

Today, I am going to show you How to upload image in Laravel 9 using jquery Ajax in our Laravel application using base 64. So from this tutorial, you will learn ajax image upload in Laravel 9 application with showing the preview before uploading.

In this laravel 9 jquery ajax Image upload tutorial i will show you how to upload and store image using ajax request with preview in Laravel 9.  Also we will see how to validate the image before uploading it into server in Laravel 9.

When we upload the image instantly we will see our uploaded image with preview before saving. That mean we will see the preview of our uploaded image using jQuery and we will store them using ajax request in Laravel 9. We will upload the image using jquery ajax without page refresh and reload in Laravel 9.

We can upload image using Ajax request in laravel 9 very easily. Let's start our laravel 9 ajax image upload tutorial from scratch.

Table of Contents for Laravel Ajax Image Upload Tutorial

  • Install Laravel 
  • Create Route
  • Create Controller
  • Create Model and Migration
  • Create View
  • Make Storage Folder Public
  • See Output


Preview : After select a image before uploading


Preview : After hitting submit button



Now let's start our laravel 9 ajax image upload tutorial with preview using base 64.

Step 1: Install Laravel 9

In first step to create laravel ajax image upload in laravel , if you haven't laravel 9 application setup then we have to get fresh laravel 9 application. 

composer create-project --prefer-dist laravel/laravel blog


Step 2: Create Model & Migration

Let’s create a Image model along with the migration file

php artisan make:model Image -m


Let’s now go ahead and modify the migration file to add the required columns.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('images', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()


And now update the image model like below:


namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model
    protected $fillable = [


Now run migrate command to create ajax jquery image upload in laravel.

php artisan migrate


Step 3: Create Route

In this is step we need to create two route one for render form view and second for add new image file. so open your routes/web.php file and add following route.


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;

Route::controller(ImageController::class)->group(function () {
    Route::get('/photo', 'index');
    Route::post('/photo', 'save');


Step 4: Create Controller

In this point, now we should create new controller call ImageController to create our two method for uploading image.


namespace App\Http\Controllers;

use App\Image;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class ImageController extends Controller
    public function index() {
        return view('image');
    public function save(Request $request)
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        if ($files = $request->file('image')) {
            $fileName =  "image-".time().'.'.$request->image->getClientOriginalExtension();
            $request->image->storeAs('image', $fileName);
            $image = new Image;
            $image->image = $fileName;

            return Response()->json([
                "image" => $fileName
            ], Response::HTTP_OK);


Step 5:  Create View

In this step, we have to create blade file to see our form and upload image into database using ajax request.



Now paste this following code to your image.blade.php file before the end body tag.

$(document).ready(function (e) {
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    let reader = new FileReader();

    reader.onload = (e) => { 


   $('#upload_image_form').submit(function(e) {

     var formData = new FormData(this);
        url: "{{ url('photo')}}",
        data: formData,
        contentType: false,
        processData: false,
        success: (data) => {
           alert('Image has been uploaded successfully');
        error: function(data){


Step 6 : Making Files Public

As you can notice current files are uploaded to the storage directory which is not public by default. It’s the Laravel’s default settings to hide default file upload from user’s as a security perspective.

You need to change following things. Open filesystems.php which is located under public directory. Change the default parameter from local to public.


'default' => env('FILESYSTEM_DRIVER', 'public'),


And run the following command.

php artisan storage:link


Now you will find your uploaded image inside the following path


Everything is done. Now you can open bellow urlon your browser:



Read also : Laravel 9 Ajax Post Request Example Tutorial


Now all are set to go. If you found this tutorial helpful and if you have any questions, Hope this Laravel 9 ajax image upload with preview example tutorial will help you. 


#laravel #laravel-9x #image-upload