Answers.Body: <p>Finally found the answer after much time spent on it.</p>
  <p>The <code>$(this).serialize()</code> loses the file input - and can't submit.</p>
  <p>Updated ajax submit to</p>
  <pre><code>$.ajax({
      type: 'POST',
      url: url,
      data: new FormData(this) ,
      dataType : 'json', // changing data type to json
      processData: false,
      contentType: false,        
      success: function (response) { // here I'm adding data as a parameter which stores the response
          console.log(response); // instead of alert I'm changing this to console.log which logs all the response in console.
      }
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-06-23T06:21:52.437Z
Answers.LastActivityDate: 2020-06-23T06:21:52.437Z
Answers.UserDisplayName: mmc501
Body: <p>I have a front end entry form which submits and saves fine when not using ajax.
  But when i do submit via ajax the text fields etc save fine but the file/assets field will not.</p>
  <p>I have stripped it right back for testing but still not saving the file on ajax submit.
  I have even made the logged in user a full admin for testing purposes.</p>
  <p>My Form:</p>
  <pre><code>&lt;form method=&quot;post&quot; id=&quot;applicationForm&quot; class=&quot;sform2&quot; accept-charset=&quot;UTF-8&quot; enctype=&quot;multipart/form-data&quot;&gt;
      {{ csrfInput() }}
      {{ actionInput('entries/save-entry') }}
      {{ hiddenInput('sectionId', '3') }}
      {{ hiddenInput('enabled', '1') }}
      {{ hiddenInput('entryId', '159') }}      
  
      &lt;label for=&quot;nameAccountIsHeldIn&quot; class=&quot;col-12 col-form-label&quot;&gt;Name account is held in&lt;/label&gt;
  
      &lt;input type=&quot;text&quot; name=&quot;fields[nameAccountIsHeldIn]&quot; class=&quot;form-control&quot; id=&quot;nameAccountIsHeldIn&quot; value=&quot;&quot;&gt;
  
      &lt;input type=&quot;file&quot; name=&quot;fields[accounts][]&quot; class=&quot;form-control&quot; id=&quot;accounts&quot; multiple&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;        
  
  &lt;/form&gt;  
  </code></pre>
  <p>js:</p>
  <pre><code>$('.sform2').submit(function(ev) {
      ev.preventDefault();
  
      startAlerts();
      var data = $(this).serialize();
      var url = $(this).attr(&quot;action&quot;);
  
      console.log($(this));
      console.log(data);
  
  
      $.ajax({
          type: 'POST',
          url: url,
          data: $(this).serialize() ,
          dataType : 'json', // changing data type to json
          success: function (response) { // here I'm adding data as a parameter which stores the response
              console.log(response); // instead of alert I'm changing this to console.log which logs all the response in console.
          }
      });
  
  });
  </code></pre>
  
Tags: <assets><ajax><frontend><frontend-form><assets-field>
Title: Front End Entry Form - File/asset field not saving when ajax submitted
ThreadText: # Front End Entry Form - File/asset field not saving when ajax submitted
  
  (Asked by: username_0 on 2020-06-23)
  
  I have a front end entry form which submits and saves fine when not using ajax.
  But when i do submit via ajax the text fields etc save fine but the file/assets field will not.
  
  I have stripped it right back for testing but still not saving the file on ajax submit.
  I have even made the logged in user a full admin for testing purposes.
  
  My Form:
  
  ```
  <form method="post" id="applicationForm" class="sform2" accept-charset="UTF-8" enctype="multipart/form-data">
      {{ csrfInput() }}
      {{ actionInput('entries/save-entry') }}
      {{ hiddenInput('sectionId', '3') }}
      {{ hiddenInput('enabled', '1') }}
      {{ hiddenInput('entryId', '159') }}      
  
      <label for="nameAccountIsHeldIn" class="col-12 col-form-label">Name account is held in</label>
  
      <input type="text" name="fields[nameAccountIsHeldIn]" class="form-control" id="nameAccountIsHeldIn" value="">
  
      <input type="file" name="fields[accounts][]" class="form-control" id="accounts" multiple>
      <button type="submit" class="btn btn-primary">Submit</button>        
  
  </form>  
  
  ```
  
  js:
  
  ```
  $('.sform2').submit(function(ev) {
      ev.preventDefault();
  
      startAlerts();
      var data = $(this).serialize();
      var url = $(this).attr("action");
  
      console.log($(this));
      console.log(data);
  
      $.ajax({
          type: 'POST',
          url: url,
          data: $(this).serialize() ,
          dataType : 'json', // changing data type to json
          success: function (response) { // here I'm adding data as a parameter which stores the response
              console.log(response); // instead of alert I'm changing this to console.log which logs all the response in console.
          }
      });
  
  });
  
  ```
  
  **Tags:** assets, ajax, frontend, frontend-form, assets-field
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2020-06-23. Score: 2 | Accepted answer
  
  Finally found the answer after much time spent on it.
  
  The `$(this).serialize()` loses the file input - and can't submit.
  
  Updated ajax submit to
  
  ```
  $.ajax({
      type: 'POST',
      url: url,
      data: new FormData(this) ,
      dataType : 'json', // changing data type to json
      processData: false,
      contentType: false,        
      success: function (response) { // here I'm adding data as a parameter which stores the response
          console.log(response); // instead of alert I'm changing this to console.log which logs all the response in console.
      }
  });
  
  ```
  
  
  ---
  
  