LaravelでCropperを使い画像の切り抜きをし登録したい

Question

前提・実現したいこと

LaravelでCropperを使って、画像の切り抜きをして、登録をする機能を作りたいです。

・ローカルからファイルを選択し画像を選択したら切り抜きするモーダルを表示する。
・モーダルのcropボタンを押すと、切り抜きした画像はpublic/storage/に保存し、モーダルを閉じて切り抜きされた画像が選択されている状態になる。
・その後、登録ボタンでデータベースに保存される。

発生している問題

モーダルのcropボタンを押しても何も反映されなくて困っています。。。(´；ω；`)

該当のソースコード

[image/add.blade.php]
@extends('layouts.app')

<form class="form-horizontal" action="{{ url('/') }}/image/add" method="post" enctype='multipart/form-data'>
    @csrf
　  <label for="account" class="col-sm-4 col-form-label text-md-right">nama：</label>　
    <div class="col-md-6">
        <input type="text" name="account" size="50" value="{{old('name')}}" ></br>
    </div>
    <label for="image" class="col-sm-4 col-form-label text-md-right">image：</label>
    <div class="col-md-6">
        <input type="file" name="image" class="image" value="{{old('image')}}"></br>
    </div>
    <input type="submit" value="登録">
</form>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel">画像編集</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
             </div>
                 <div class="modal-body">
                     <div class="img-container">
                         <div class="row">
                             <div class="col-md-8">
                                 <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                             </div>
                             <div class="col-md-4">
                                 <div class="preview"></div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                     <button id="crop" class="btn btn-primary">Crop</button>
                 </div>
             </div>
         </div> 
     </div>
<script type="text/javascript">
    // init
    // class='cropper-example-1のimgタグに適用'
    var $image = $('.cropper-example-1 > img'),replaced;

    //crop options
    // id='imgに適用'
    $('#img').cropper({
      aspectRatio: 4 / 4 // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9

      });
    </script>

[image.js]

'use strict';

var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$(function(){
 
$("body").on('change', '.image', function(e){
    var files = e.target.files;
    var done = function (url) {
      image.src = url;
      $modal.modal('show');
    };
    var reader;
    var file;
    var url;

    if (files && files.length > 0) {
      file = files[0];

      if (URL) {
        done(URL.createObjectURL(file));
      } else if (FileReader) {
       var reader = new FileReader();
        reader.onload = function (e) {
          done(reader.result);
        };
        reader.readAsDataURL(file);
      }
    }
});

$modal.on('shown.bs.modal', function () {
    cropper = new Cropper(image, {
	  aspectRatio: 1,
	  viewMode: 3,
	  preview: '.preview'
    });
}).on('hidden.bs.modal', function () {
   cropper.destroy();
   cropper = null;
});
$("#crop").on('click',function(){
    canvas = cropper.getCroppedCanvas({
	    width: 160,
	    height: 160,
      });
    });
    canvas.toBlob(function(blob) {
        url = URL.createObjectURL(blob);
        var reader = new FileReader();
         reader.readAsDataURL(blob); 
         reader.onloadend = function() {
            var base64data = reader.result;	

            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'image/upload',
                data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},
                success: function(data){
                    $modal.hide('slow');
                    alert("画像を登録しました！");
                }
              });
         }
    });
  });

[ImageController]

use Illuminate\Http\Request;
use Image;

public function add(Request $request){
        return view('image.add');
    }
    public function create(Request $request){
        $image = new Image;
        $form  = $request->all();
        unset($form['_token']);
        $image->fill($form)->save();
        return redirect('/image/add');
        
public function upload(Request $request)
  {   
    $folderPath = public_path('/storage/images/' );
    $image_parts = explode(";base64,", $request->image);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_type = $image_type_aux[1];
    $image_base64 = base64_decode($image_parts[1]);
    $file = $folderPath  . Auth::id() . '.jpg';

    file_put_contents($file, $image_base64);
    return response()->json(['success'=>'success']);
  }

[web.php]

Route::get('image/add', 'EngilController@add');
Route::post('image/add', 'EngilController@create');
Route::post('image/upload', 'EngilController@upload');

[layouts/app.blade.php]

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
<script src="/image.js"></script>

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />

補足情報

cropボタン以外は正常に動いてます。
cropボタンを押すとモーダルは閉じてimage/addのviewに戻りますが切り抜きしたimageが消えて無くなってしまいます。（データベースにも public_path('/storage/images/')にも保存されません。
cropボタンを反映させるには、どうしたら良いでしょうか。。

JavaScipt＆jQuery初心者です。laravelもまだ半年です。。
記述の仕方など、めちゃくちゃで読みづらいかもしれません。。

ご助言いただけますと嬉しいです(´；ω；`)

Comments

[hayato7]

ボタンを押下した時、consoleにもなんのエラーも出ていないのでしょうか？

[mikimiki0055]

コメントいただきましてありがとうございます！
エラーは何も出ていないのです。。。ただ、モーダルが閉じて、何事もなかったようになります。。