How to crop picture before upload (Upload button not working)

<div class="col-md-4 text-center">

            <div id="upload-demo"></div>

        </div>

        <div class="col-md-4" style="padding:5%;">

            <strong>Select image to crop:</strong>

            <input type="file" id="image">

            <button class="btn btn-primary btn-block upload-image" id="upload-image" style="margin-top:2%">Upload Image</button>

        </div>

        <div class="col-md-4">

            <div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div>

        </div>



<script type="text/javascript">

        $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        }

        });

        var resize = $('#upload-demo').croppie({

            enableExif: true,

            enableOrientation: true,    

            viewport: { 

                width: 200,

                height: 200,

                type: 'circle'

            },

            boundary: {

                width: 300,

                height: 300

            }

        });

        $('#image').on('change', function () { 

        var reader = new FileReader();

            reader.onload = function (e) {

            resize.croppie('bind',{

                url: e.target.result

            }).then(function(){

                console.log('jQuery bind complete');

            });

            }

            reader.readAsDataURL(this.files[0]);

        });

        $('.upload-image').on('click', function (ev) {

        resize.croppie('result', {

            type: 'canvas',

            size: 'viewport'

        }).then(function (img) {

            $.ajax({

            url: "{{route('upload.image')}}",

            type: "POST",

            data: {"image":img},

            success: function (data) {

                html = '<img src="' + img + '" />';

                $("#preview-crop-image").html(html);

            }

            });

        });

        });

    </script>

My controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function index()

    {

      return view('imageUpload');

    }

    public function uploadImage(Request $request){

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

        $user = Auth::user();

        $imageName = $user->id.'_image'.time().'.'.request()->image->getClientOriginalExtension();

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

        $user->image = $imageName;
        $user->save();

        return redirect("/profile/{$user->id}/{$user->username}")
            ->with('success','You have successfully upload image.');

    }
}