I have a form that has 2 text areas and 1 file upload which triggers an ajax script but when i console.log the info nothing is shown for the image

Question

HTML Form that should trigger the ajax script

                <form id="create" enctype="multipart/form-data">
                    <h1>Create an Article</h1><br>
                    <textarea name="title" class="title" rows="1" cols="20" placeholder="Article Title" required></textarea><br>
                    <textarea name="content" class="content" rows="10" cols="20" placeholder="Article Content" required></textarea><br>
                    <input type="file" name="fileToUpload" id="fileToUpload" required><br>

                    <input type="button" id="create_article" value="Create">
                </form>

AJAX Script, but when triggered and when the data from the form is logged, it only shows the data from the 2 text areas, ex. Data: title=title&content=content

$(function () {
    $('#create_article').bind('click', function (event) {
        event.preventDefault();

        $.ajax({
            type: 'POST',
            url: '../scripts/create.php',
            data: $('#create').serialize(),
            success: function () {
                // location.reload();
            }
        });
        console.log(`Data: ${$('#create').serialize()}`);
        alert('Article Created!');
    });
});