Update Crop Image with cropper js in Laravel don't work before upload

i've a problem with my code. I use Spatie Media library and cropper.js for crop the image before upload in the db. When i upload a form, the crop is fine, the preview too. But when i save the image in the folder and db the pics not resize. He crop only if don't move or resize the element. Can you help me? Blade.php

 <form enctype="multipart/form-data" action="{{route('admin.users.changeAvatar', $user->id)}}" method="POST" class="avatar-upload">
                @csrf

                <div class="avatar-edit">
                    <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" name="avatar" class=" imageUpload" />
                    <input type="hidden" name="base64image" name="base64image" id="base64image">
                    <label for="imageUpload"></label>
                </div>
                <div class="avatar-preview container2">
                    
                    <div id="imagePreview" style="background-image:url('/uploads/avatars/{{ $user->avatar }}');">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <input type="hidden" name="media" value="{{ $user->media }}">
                        <input style="margin-top: 60px;" type="submit" class="btn btn-danger">  
                    </div>
                </div>
            </form>
            <div class="modal fade bd-example-modal-lg imagecrop" id="model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="img-container">
                            <div class="row">
                                <div class="col-md-11">
                                    <img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary crop" id="crop">Crop</button>
                      </div>
                  </div>
                </div>
              </div>

Controller changeAvatar.php

dd(json_decode($request->file('avatar')));

    $user = User::find($id);
    
    $avatar = $request->file('avatar');

       DB::table('user_avatars')
            ->where('user_id', $user->id)
            ->update([
                'path' => $request->file('avatar')->getClientOriginalName(),
                'extension' => $request->file('avatar')->getClientOriginalExtension(),
                'size' => $request->file('avatar')->getSize(),
                'mime' => $request->file('avatar')->getClientMimeType()
            ]);
        
            $user->addMediaConversion($avatar);
                   
            if ($request->hasFile('avatar')) {
                $user->clearMediaCollection('avatar');
                User::first()
                    ->addMedia($avatar)
                    ->toMediaCollection('avatar');
            }

        notify()->success('Avatar Changed Successfully!', 'User');
        return back();

Cropper Js

    <script>
    var $modal = $('.imagecrop');
    var image = document.getElementById('image');
    var cropper;
    $("body").on("change", ".imageUpload", 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) {
                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: 1,
        });
    }).on('hidden.bs.modal', function() {
        cropper.destroy();
        cropper = null;
    });
    $("body").on("click", "#crop", 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;
                 $('#base64image').val(base64data);
                 document.getElementById('imagePreview').style.backgroundImage = "url("+base64data+")";
                 $modal.modal('hide');
            }
        });
    })
</script>