Hello Devs,

In this tutorial, we are going to see example of uploading ajax image on laravel 7.

Follow this step by step guide given below:



Step 1 :


 Install Laravel 7 

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

Database Configuration .env

DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret



Step 3: 


Create images Table and Model 

php artisan make:model Image -m

database/migrations/2020_01_10_102325_create_images_table.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('image');
            $table->timestamps();
        });
    }

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

Run this command:

php artisan migrate

app/Image.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    /**
    * The attributes that are mass assignable.
    *
    * @var array
    */
    protected $fillable = ['image'];
}



Step 4: 


Create Route routes/web.php

Route::get('/ajax-image-upload','ImageController@create');
Route::post('/ajax-image-upload','ImageController@store')->name('image.ajax.store');



Step 5: 


Create Controller 

php artisan make:controller ImageController

app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controller;

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

class ImageController extends Controller
{
    /**
    * Show the application ajaxImageUpload.
    *
    * @return \Illuminate\Http\Response
    */
    public function create()
    {
      return view('create');
    }
    /**
    * Show the application ajaxImageUploadPost.
    *
    * @return \Illuminate\Http\Response
    */
    public function store(Request $request)
    {
        $input = $request->all();

        $validator = Validator::make($request->all(), [
            'image' => 'required',
        ]);

        if($validator->passes()){
            $imageName = time().'.'.request()->image->getClientOriginalExtension();
            $input['image'] = $imageName;
            request()->image->move(public_path('photos'), $imageName);

            Image::create($input);

            return Response()->json(["success"=>"Image Upload Successfully"]);
        }

        return response()->json(['error'=>$validator->errors()->all()]);
    }
}



Step 6: 


Create View resources/views/create.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Ajax Image Upload</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style type="text/css">
        .mt-5{
            margin-top: 150px !important; 
        }
        body{
            background: #423E3D;
        }
    </style>
</head>
<body class="bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header">
                        <h5>Laravel 7 Ajax Image Upload - Rathorji.in</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-danger print-error-msg" style="display:none">
                            <ul></ul>
                        </div>
                        <div class="success alert alert-success">
                            Image Upload Successfully
                        </div>
                        <form enctype="multipart/form-data" id="imageUpload">
                            <div class="form-group">
                                <label><strong>Image : </strong></label>
                                <input type="file" name="image" class="form-control">
                            </div>
                            <div class="form-group text-center">
                                <button class="btn btn-success">Save</button>
                            </div>
                        </form>                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.success').hide();// or fade, css display however you'd like.
        });

        $('#imageUpload').on('submit',(function(e) {
            $.ajaxSetup({
                headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
             
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
               type:'POST',
               url: "{{ route('image.ajax.store')}}",
               data:formData,
               cache:false,
               contentType: false,
               processData: false,
             
                 complete: function(response) 
                {
                    if($.isEmptyObject(response.responseJSON.error)){
                            $('.success').show();
                           setTimeout(function(){
                           $('.success').hide();
                        }, 5000);
                    }else{
                        printErrorMsg(response.responseJSON.error);
                    }
                }

            });
        }));
       function printErrorMsg(msg){
               $(".print-error-msg").find("ul").html('');
            $(".print-error-msg").css('display','block');
            $.each( msg, function( key, value ) {
                $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
            });
       }
    </script>
</body>
</html>


I hope this example helps you.