Error in file upload using Jquery & Ajax

Question

I am trying to upload files using jQuery and AJAX. I have used FormData object which is supported in HTML5. I am using IE11. Below is my code:

<form id="tradeForm" method="post" action="/trade.action?method=addTrade" enctype="multipart/form-data">
    Trade Type : <input type="text" id="tradeType" name="tradeType">
    Trade Document : <input type="file" id="attachedFile" name="attachment" size="40">
</form>

I've tried using $.post:

$("#tradeForm").submit(function(event){
    event.preventDefault();
    var form = $(this);
    var formData = new FormData(form);
    url = form.attr("action");

    $.post(url, formData, function(data) {
        console.log(data);
    });
});

And also using $.ajax

$("#tradeForm").submit(function(event){
    event.preventDefault();
    var form = $(this);
    var formData = new FormData(form);
    url = form.attr("action");

    $.ajax({
        url: url,
        type: "POST",
        data: formData,
        processData: false,  // tell jQuery not to process the data
        contentType: false   // tell jQuery not to set contentType
    }).done(function(data) {
        console.log(data);
    });
});

I get the following errors:

Argument not optional

When $.post method is used

SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3, Could not complete the operation due to error 00002ef3

When $.ajax method is used. How can I solve these errors?

Answer 1

The FormData constructor expects a DOMElement, not a jQuery object, so you need to amend your FormData() definition. Try this:

$("#tradeForm").submit(function(event){
    event.preventDefault();
    var $form = $(this);
    var formData = new FormData($form[0]); // note [0] here
    url = $form.prop("action");

    $.ajax({
        url: url,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false
    }).done(function(data) {
        console.log(data);
    });
});

Answer 2

change this:

var formData = new FormData(form);

to

var formData = new FormData(form[0]);

As FormData needs a form the DOM element this not the jQuery object $(this)

Answer 3

Change the form variable to this:

 var form  = document.getElementById('tradeForm');
 url = $(form).attr("action");

set the contentType: 'Content-Type: multipart/form-data';

Answer 4

I found the fix for the issue. Below are changes done :

1. Pass DOM element to FormData constructor instead of Jquery Object.
   var formData = new FormData(document.getElementById("tradeForm"));

2. Remove attribute - enctype="multipart/form-data" from the form in the html.
   Otherwise it will not be possible to read form data at the server end.

3. Use correct server URL(In my case the URL was wrong). The error message - SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3, Could not complete the operation due to error 00002ef3 was because of wrong URL. It was misleading.