ساخت تغییر پروفایل کاربری با ajax در لاراول

سلام
من در لاراول میخواستم حالتی رو ایجاد کنم که وقتی کاربر روی بخش نمایش پروفایل که یک تگ img هست کلیک کرد و بعد از اون یک عکس برای پروفایل انتخاب کرد، علاوه بر پیش نمایش عکس، با استفاده از ajax بتونه به یک route خاصی اطلاعات عکس ارسال بکنه و پس از آپدیت عکس، نتیجه براش برگرده. ولی وقتی که از ajax استفاده میکنم و request‌ رو چاپ میکنم. متغیر profile رو null بر میگردونه
این کد فرمم هست:

<form method="post" action="{{route('site.acc.profile.update')}}" enctype="multipart/form-data" id="update-img-form">
                @csrf
                @method("put")
                <input type="file" style="display: none" id="profileInput" name="profile">
                @if(isset(auth()->user()->profile))
                    <img id="imgTag" class="card-img-top img-fluid rounded-circle d-block mx-auto" style="width: 100px; height: 100px;" src="/storage/{{auth()->user()->profile}}" >
                @else
                    <img id="imgTag" class="card-img-top img-fluid rounded-circle d-block mx-auto" style="width: 100px; height: 100px;" src="/storage/admin/images/avatar.png">
                @endif
                <input type="submit" style="display: none">
            </form>

و این هم کد جاوااسکریپتم هست:

<script type="text/javascript">
    $(document).ready(function (){
        $("#imgTag").click(function(e){
            $("#profileInput").click();
        });

        $("#update-img-form").on("submit", function(e){
            e.preventDefault();

            var url = $("#update-img-form").attr("action");
            $.ajaxSetup({
                "headers": {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                }
            })
            console.log(this);
            $.ajax({
                method: "PUT",
                url: url,
                data: new FormData(this),
                dataType: "JSON",
                // contentType: false,
                cache: false,
                processData: false,
                success: function(response){
                    console.log(response);
                },
                error: function(response){
                    console.log(response);
                }
            });
        });

        document.querySelector("#profileInput").addEventListener("change", function(){
            if(this.files && this.files[0])
            {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $("#update-img-form").submit();
                    $("#imgTag").attr("src", e.target.result).width(100).height(100);
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    });
</script>

درحال حاضر داخل کنترلر هیچ چیز خاصی ندارم فقط یک response‌ از نوع json برای دیباگ ریترن میکردم. اگر کسی از دوستان روش بهتری رو بلده یا مشکل کار من رو میدونه ممنون میشم که راهنمایی کنه