Laravel 8 Ajax Image Upload with Preview Tutorial

Using Laravel 8 or 9 Ajax image upload and preview example tutorial you will learn step by step on how to upload image using jQuery ajax with preview in laravel App.

Many times we need to save the image data with ajax request in laravel app and preview without page reload or refresh the web or html page. So, this laravel ajax image upload and preview show you step by step how to upload image with preview using jQuery and ajax in laravel 8 or 9 app.

Ajax image upload and preview with laravel

Use the following steps for upload image using ajax with preview in laravel 8 applications:

Step 1 – Download Laravel Application
Step 2 – Database Configuration
Step 3 – Build Model & Migration
Step 4 – Create Routes
Step 5 – Generate Controller
Step 6 – Create Ajax Image Upload Form
Step 7 – Create Images Directory
Step 8 – Run Development Server

Step 1 : Install Laravel App

First install laravel application just run the below command.

composer create-project --prefer-dist laravel/laravel upload-images

Step 2: Setup Database

Now setup your database, open you .env file and add the database name, username and password on it.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_images
DB_USERNAME=root
DB_PASSWORD=

Step 3: Create Model & Migrations

Now generate the model and migration file just running the below command.

php artisan make:model Image -m

The command generate two file one is model and another is migration file, You need to add fillable property in model and open the migration file and add below code.

database\migrations\2020_09_13_082159_create_images_table.php

<?php

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) {
            $table->id();
            $table->string('name')->nullable();
            $table->string('path')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

After adding the code in you migration file now run the migrate command which is generate a new table in your database.

php artisan migrate

Add Fillable Property in Model

If we store data in database then we need to update fillable property in model means which columns we must to update when we store the data.

app\Image.php

    /**
      * The attributes that are mass assignable.
      *
      * @var array
      */
     protected $fillable = [
         'name', 'path'
     ];

Step 4: Make Routes

Now in this step you need to add two routes in your web.php file same as below.

routes\web.php

<?php

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


Route::get('upload-images', [ ImageController::class, 'index' ]);
Route::post('upload-images', [ ImageController::class, 'storeImage' ])->name('images.store');

Route::get('/', function () {
    return view('welcome');
});

Step 5: Create Controller

Create a new controller.

php artisan make:controller ImageController

After running the above command you got a new controller file open and put the below code on it.

app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Image;

class ImageController extends Controller
{
    public function index()
    {

      return view('images');
    }

    public function storeImage(Request $request)
    {
        $request->validate([
          'file' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $image = new Image;

        if ($request->file('file')) {
            $imagePath = $request->file('file');
            $imageName = $imagePath->getClientOriginalName();

            $path = $request->file('file')->storeAs('uploads', $imageName, 'public');
        }

        $image->name = $imageName;
        $image->path = '/storage/'.$path;
        $image->save();

        return response()->json('Image uploaded successfully');
    }
}

Step 6: Create Blade File

Now create a images file in view section and put the below code on it.

resources\views\images.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel Image Upload Using Ajax Example with Coding Driver</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<div class="container mt-4">
  <h2>Laravel Image Upload Using Ajax Example with- <a href="https://codingdriver.com/">codingdriver.com</a></h2>
    <form method="post" id="upload-image-form" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <input type="file" name="file" class="form-control" id="image-input">
            <span class="text-danger" id="image-input-error"></span>
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-success">Upload</button>
        </div>

    </form>
</div>

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

   $('#upload-image-form').submit(function(e) {
       e.preventDefault();
       let formData = new FormData(this);
       $('#image-input-error').text('');

       $.ajax({
          type:'POST',
          url: `/upload-images`,
           data: formData,
           contentType: false,
           processData: false,
           success: (response) => {
             if (response) {
               this.reset();
               alert('Image has been uploaded successfully');
             }
           },
           error: function(response){
              console.log(response);
                $('#image-input-error').text(response.responseJSON.errors.file);
           }
       });
  });

</script>
</body>
</html>

NOTE: Run the laravel storage link command for uploading images in public and storage directory.

php artisan storage:link

Step 7: Create “uploads” Directory

Create a uploads folder in your public directory. In ubuntu we need to add permission for our folder, you can take below command to giving permission your directory and then you can upload image easily in your database.

Permission to public folder:

sudo chmod -R 777 public/uploads