Error encoding model [App\Sacrifice] with ID [32] to JSON: Recursion detected

I'm trying to modify a record. This record contains an image and can also be modified. I don't know how to modify the image that is saved in a public directory in the project.

This is my code for uploading images(it takes place inside my bootstrap model). When I upload the image,and click on the submit button,the image should inserted into db and the same should be retrieved and displayed on the view page.

How to add FormData in ajax when I upload a file and pass to Controller for save in database?

Blade

<div class="modal fade" id="sacrificeModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="sacrificeModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sacrificeModal">ویرایش عنوان افتخار</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" id="sacrificeFormUpdate">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="id">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="edit_sacrifice">Sacrifice</label>
                            <input type="text" class="form-control" id="edit_sacrifice" name="sacrifice">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="edit_file">آFile</label>
                            <input type="file" class="form-control" id="edit_file" name="file">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="sacrificeUpdate">Save</button>
            </div>
        </div>
    </div>
</div>

script

$(document).on('click', '#sacrificeEdit', function(event) {
    event.preventDefault();
    var id = $(this).data('id');
    $.ajax({
        type:'get',
        dataType: 'JSON',
        url:'/sacrifice/'+id+'/edit',
        success:function (data) {
            console.log(data);
            $('#id').val(data.sacrifice.id);
            $('#edit_sacrifice').val(data.sacrifice.sacrifice);
            $('#edit_file').val(data.sacrifice.file);
        },
    });
});

$(document).on('click', '#sacrificeUpdate', function(event) {
    event.preventDefault();
    var id = $('#id').val();
    var file = $('#edit_file').prop('files')[0];
    var formData = new FormData($('#sacrificeFormUpdate')[0]);
    formData.append('file', file);
    $.ajax({
        type: 'PUT',
        url: '/sacrifice/'+id,
        dataType: 'JSON',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            console.log(response);
            $('#sacrificeModal').modal('hide');
            showSacrifice();
        },
    });
});

Controller

public function update(Request $request, Sacrifice $sacrifice)
{
    $fileName = $request->file == $request->file ? $request->file : null;
    if ($request->hasFile('file'))
    {
        $file = $request->file('file');
        $nane = time();
        $extension = $file->getClientOriginalExtension();
        $fileName = $nane . '.' . $extension;
        $file->move(public_path('files/sacrifices'), $fileName);
    }
    $data = [
        'sacrifice' => $request->sacrifice,
        'file' => $fileName,
    ];
    $sacrifice->update($data);
    return response()->json($sacrifice);
}

Sacrifice.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Sacrifice extends Model
{
    protected $guarded = [];
}

I get this error.