JQuery FormData ajax file upload not working

Question

I can't see why my code is not working. My html is:

<form name="admin_image" action="/index.php" method="post"enctype="multipart/form-data">
    <input class="editor" type="text" name="image_title_100502002" value="" placeholder="Bildtitel">
    <label for="fileToUpload_100502002" class="fileUpload">
    <input type="file" name="fileToUpload" id="fileToUpload_100502002">
    </label>
    <input type="submit" name="delete_image_100502002" value="Bild löschen">
    <span data-name="remove_image_100502002">Abbrechen</span>
    <input class="ajax_submit_image" type="submit" name="submit_image_100502002" value="Speichern">
</form>

when submitting the form without ajax, everything works and the server side can process the $_FILES array, when submitting the form via ajax, it doesnt work, even though chrome dev tool shows the xhr beeing successfull. This is my Jquery ajax:

// send cms image via ajax 
$("input.ajax_submit_image").click(function(event){
    //dont submit form on click
    event.preventDefault();

    //save form parent in variable
    var thisform = $(this).parent();
    //set ajax data 
    var formdata = new FormData(thisform[0]);

    // send ajax
    $.ajax({
       data: formdata,
       processData: false,
       contentType: false,
       error: function() {
          alert('an ajax error occured');
       },
       success: function() {
        //return updated content
        // $('form.show').next('div.currentcontent').empty().append('TEST');
        //close the form after ajax submission
        thisform.toggleClass('show');

        // hide overlay when form is hidden
        $('#cms_overlay').removeClass('show');
        //reset id when current content is submitted when ajax finished
        CMS.currenteditid= undefined;

       },
       type: 'POST'
    });
})

Does anyone see why it does not work with ajax ? Thanks in advance!

user2759789 · Accepted Answer · 2018-03-10 20:39:19Z

0

I cut it from my app

  <input type="file" id="input_files" name="input_files[]" multiple="true" onchange="uploader.loadFiles(event);" /> 

----
// load files, var files = new Array()
var loadFiles = function(event)
{
    files = event.target.files;     
}

Well, the rest of processing is done in another place, but to manage files you'll need to apply something like that.

answered Mar 10, 2018 at 20:39

user2759789

11 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

nr1chiefrocka Over a year ago

Hey, as I understood this article there shouldn't be any additional code necessary when using Formdata to send files. developer.mozilla.org/en-US/docs/Web/API/FormData/… . Did I miss something in this article ?

Collectives™ on Stack Overflow

JQuery FormData ajax file upload not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related