Upload Image in Laravel 7 using Ajax Example Tutorial

Upload Image in Laravel 7 using Ajax Example Tutorial from scratch in step by step is leading topic of today’s. Here we have expained laravel 7 ajax image upload tutorial from scratch easy way. More then times we need to save the image data with ajax request in laravel app. If you know laravel form submit using ajax then uploading image in laravel using ajax and save in database it too easy. Here we upload file using ajax in laravel with validations save in database and remove image and preview option as well as.

Laravel makes it very easy to store uploaded files using the store method on an uploaded file instance. Call the store method with the path at which you wish to store the uploaded file. So guys let’s checkout Upload Image in Laravel 7 using Ajax with showing validation, preview image and remove image option here. This example works in your laravel 5, laravel 6, laravel 7 or laravel 8 version.

Step 1 : Install Laravel 7 App

First install laravel 7 application just run the below command.

composer create-project --prefer-dist laravel/laravel:^7.0 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_07_25_071908_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

Route::get('upload-images', 'ImageController@index');
Route::post('upload-images', 'ImageController@storeImage');

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\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>

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