Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-27T07:36:47.720Z
Answers.LastActivityDate: 2018-07-27T07:36:47.720Z
Answers.UserDisplayName: Robin Schambach
Body: <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>
  
Tags: <craft3><ajax>
Title: Ajax not updating user image
ThreadText: # 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.
  
  ```
  <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){
          }
      });
  });
  
  ```
  
  **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)
  
  
  ---
  
  