How to post form input values including image file with ajax json stringify

Question

This is my form HTML Code

<form id="PostOfficeFeed" enctype="multipart/form-data">
<input type="text" name="feed_title">
<textarea name="feed_text"></textarea>
<input type="file" name="feed_img" id="FeedImg" />
<button type="submit" id="PostOfficeBtn">Post</button>
</form>

This is my jquery and ajax code

$('#PostOfficeBtn').click(function(){
        $("#PostOfficeFeed").validate({
            rules:{
                feed_title:{required:true, minlength:10},
                feed_text:{required:true},
                feed_img:{required:false, extension:"jpg|jpeg|png"},
                feed_youtube:{required:false},
                feed_video_url:{required:false, url: true}
            },
            messages:{
                feed_title:{required:"Feed Title", minlength:"Enter Min 10 characters"},
                feed_text:{required:"Feed Description"},
                feed_img:{required:"img", extension:"Upload only jpg jpeg png files"},
                feed_youtube:{required:"img"},
                feed_video_url:{required:"url", url:"Enter Valide URl"}
            },
            submitHandler:function(){
                //Method One
                // var formData = $('#PostOfficeFeed')[0];
                // console.log(formData);
                // var data = new FormData(formData);
                // //$("#LoadingMsg").modal("show");
                // var JsonDate = JSON.stringify(
                //  Object.fromEntries(data)
                // );
                // console.log(JsonDate);


                // Method Two
                var imgFile = document.getElementById('FeedImg');
                var imgfileList = imgFile.files;
                
                if(imgfileList && imgfileList != null && imgfileList.length > 0) {
                    JsonDate.append(imgfileList[0].name, imgfileList[0].value);
                    JsonDate.append('feed_img', imgfileList[0].value);
                }

                var JsonDate = new FormData();
                var other_data = $('#PostOfficeFeed :input').serializeArray();
                $.each(other_data, function (key, input) {
                    JsonDate.append(input.name, input.value);
                });
                
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: URL+'post-feeds/test.php',
                    dataType:"json",
                    data: JsonDate,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function(data){
                        if(data.response==="success"){
                            $("#LoadingMsg").modal("hide");
                            swal("Successfully", data.message, "success");
                            $('#PostOfficeFeed')[0].reset();
                        }
                        else{
                            swal("Error", data.message, "error");
                        }
                    }
                });
            return false;
            }
        });
    });

I have tried so much but I dont know where iam missing.

• When I am using method one: I can able to post only text input fields not with image When I am using method two: I can able to upload and post the image only

and Actually Iam looking to get both text input value and image input value would anyone please help me to correct my code or suggestions

Thank you In advance for your time and consideration