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

<p>You can see a good guide <a href="https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax" rel="nofollow noreferrer">simple file uploads</a> </p>

CC BY-SA 4.0
2018-07-27T07:36:47.720Z
2018-07-27T07:36:47.720Z
Robin Schambach
<p>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.</p>

<pre><code>&lt;form method="post" enctype="multipart/form-data" id="profile-form" action="" class="form" accept-charset="UTF-8"&gt;

    {{ csrfInput() }}

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

    {% macro errorList(errors) %}
        {% if errors %}
            &lt;ul class="errors"&gt;
                {% for error in errors %}
                    &lt;li&gt;{{ error }}&lt;/li&gt;
                {% endfor %}
            &lt;/ul&gt;
        {% endif %}
    {% endmacro %}

    {% from _self import errorList %}

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

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;

$("#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){
        }
    });
});
</code></pre>

<craft3><ajax>
Ajax not updating user image
# Ajax not updating user image

(Asked by: username_0 on 2018-07-27)

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.


    {{ csrfInput() }}

    
    
    
    {{ redirectInput('my-program/account') }}

    {% macro errorList(errors) %}
        {% if errors %}
            
                {% for error in errors %}
                    {{ error }}
                {% endfor %}
            
        {% endif %}
    {% endmacro %}

    {% from _self import errorList %}

    
    
        
            {% if currentUser.getPhoto != '' %}
                
            {% else %}
                
            {% endif %}
            
            Change Avatar
        
        
            
                Name
                
            
            
                Role
                
            
            
                company
                
            
            
                email
                
            
        
    
    
        
            

        
    


$("#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){
        }
    });
});

**Tags:** craft3, ajax


---

## 1 answers

### Answer by username_1 on 2018-07-27. Score: 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](https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax)


---

