Ajax not updating user image

Question

I have ajax submitting my form everything works except the user image. It works without ajax but not sure why it's not working with ajax. My ajax is and form are shown below.

<form method="post" enctype="multipart/form-data" id="profile-form" action="" class="form" accept-charset="UTF-8">

    {{ csrfInput() }}

    <input type="hidden" name="action" value="users/save-user">
    <input type="hidden" name="redirect" value="account">
    <input type="hidden" name="userId" value="{{ currentUser.id }}">
    {{ redirectInput('my-program/account') }}

    {% macro errorList(errors) %}
        {% if errors %}
            <ul class="errors">
                {% for error in errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endmacro %}

    {% from _self import errorList %}

    <input type="hidden" name="userId" value="{{ currentUser.id }}">
    <div class="row no-gutters">
        <div class="col-sm-3">
            {% if currentUser.getPhoto != '' %}
                <img src="{{ currentUser.photo.getUrl }}" alt="" class="mx-auto d-block img-fluid" style="width:150px;">
            {% else %}
                <img src="http://13.57.33.145/web/cpresources/e68e2d59/images/user.svg?v=1532465642" class="mx-auto d-block img-fluid" style="width:120px;">
            {% endif %}
            <input type="file" id="userPhoto" name="photo" value="Upload">
            <div id="profile-image-upload" class="text-center">Change Avatar</div>
        </div>
        <div class="col-sm-9">
            <div class="form-group">
                <label>Name</label><br>
                <input type="text" id="fullName" name="fields[fullName]" value="{{ currentUser.fullName }}">
            </div>
            <div class="form-group">
                <label>Role</label><br>
                <input type="text" id="userRole" name="" value="Your Role here">
            </div>
            <div class="form-group">
                <label for="company">company</label><br>
                <input type="text" id="company" name="fields[company]" value="{{ currentUser.company }}">
            </div>
            <div class="form-group">
                <label for="email">email</label><br>
                <input type="text" id="email" name="fields[email]" value="{{ currentUser.email }}">
            </div>
        </div>
    </div><!-- end row -->
    <div class="form-group row">
        <div class="col-lg-11 offset-md-0">
            <input type="submit" value="Save Changes" id="saveProfile" class="dark-btn">

        </div>
    </div>
</form>

$("#profile-form").submit( function(e) {
    e.preventDefault();
    var data = $(this).serialize();

    $.ajax({
        method: "POST",
        url: "users/save-user",
        data: data,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        success: function(data, response){
        }
    });
});

Answer 1

You can't just upload files via serialized form data by default with jQuery. I suggest you to create a new FormData instead and append the files from your input, so you need to grab them first

You can see a good guide simple file uploads