Error in Sending Form file with form using AJAX

I am trying to submit form using AJAX that contains CSV File. So the idea is sending the form using ajax, process it in different file by generating a table and call back the processed table back into the page.

What i Have is this,

<form id="uploadXls" action="" method="post" enctype="multipart/form-data">
      <input id="uploaderFile" type="file" class="file"><br/>
      <button type="button" class="btn btn-orange pull-right" name="btnSubmit" id="btnSubmit"><i class="fa fa-download"></i> SHOW FILE CONTENT</button>

and the JavaScript is,

                type: 'POST',
                url: '../../content/maindiv_content/drawing/divpages/process_xls_file.php',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function (response, textStatus, jqXHR) {

and im getting this kind of error in firebug,

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
http://infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js line 4 > eval
Line 14

What am i doing wrong here ? Please help me

Don’t pass the files into the constructor, but use append, like:

var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
data:  formData

You can use this approach too.

var form = $('form').get(0); 

this code returns a jQuery object($('form')) and pass a HTML element to FormData (get(0)).

then in ajax request: data: new FormData(form),

You pass this to the FormData constructor. In this context, this is the button clicked, identified in the error message as a HTMLFormElement.

According to the documentation the FormData constructor expects a form element. So you have to change your code accordingly:

 var form = $("#uploadXls");

     data: new FormData(form),

may be this page help you..:)

<!DOCTYPE html>
  <script src="" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
  <form method="post" id="fileinfo" enctype="multipart/form-data">
    file <input type="file" name="slug"><br>
     <input type="button" id="uploadBTN" value="Stash the file!"></input>
<script type="text/javascript">
      $('#uploadBTN').on('click', function()
        var form = $('form').get(0); 
        var fd = new FormData(form);
        fd.append("user_", "This is some extra data");
            url: 'http://localhost/yii2/voila/project/api/web/v1/user-media/new',  
            type: 'POST',
            data: fd,
            cache: false,
            contentType: false,
            processData: false

Try this form, it works for me without problems,
Greetings, I hope I can help you.

Read More:   How to get the text of the selected option using vuejs?

//normalize form

var formulario = new FormData($('#form_img').get(0));    
    formulario.append('file', $('#customFile')[0].files[0]);

//AND add in Ajax call


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts