<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>

CC BY-SA 4.0
2020-06-23T06:21:52.437Z
2020-06-23T06:21:52.437Z
mmc501
<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>

<assets><ajax><frontend><frontend-form><assets-field>
Front End Entry Form - File/asset field not saving when ajax submitted
# 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:

    {{ csrfInput() }}
    {{ actionInput('entries/save-entry') }}
    {{ hiddenInput('sectionId', '3') }}
    {{ hiddenInput('enabled', '1') }}
    {{ hiddenInput('entryId', '159') }}      

    Name account is held in

    

    
    Submit        

  

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.
    }
});


---

