MVC Core : Upload file through Ajax request and return JSON object without redirect

Question

I have a requirement where I want to upload an excel file to the controller, read the file, process its data and send it back to the same view as the JSON object.

I want to achieve this using AJAX call as I want to capture its success callback and manipulate DOM as per received response. I have tried a few things but I am not able to hit the controller. Any help on this is appreciated.

Below shown is my JS, HTML and C# code :

function SubmitInfo() {
    var formData = new FormData();
    formData.append('file', $('#fileInput')[0].files[0]); // myFile is the input type="file" control

    var _url = '@Url.Action("Upload", "CrossValidation")';

    $.ajax({
        url: _url,
        type: 'POST',
        data: formData,
        processData: true,  // tell jQuery not to process the data
        contentType: false,  // tell jQuery not to set contentType
        success: function (result) {
            //manipulate DOM and bind response with Kendo grid
            alert("result");
        },
        error: function (jqXHR) {
        },
        complete: function (jqXHR, status) {
        }
    });
}

<div class="col-md-4">
    <input id="fileInput" type="file">
</div>
<div class="col-md-4">
    <input type="submit" value="Upload file" onclick="SubmitInfo()"/>
</div>

public JsonResult Upload(IFormFile formData)
{
    //Do something here....
    return Json("");
}

Kirk Larkin · Accepted Answer · 2018-10-09 13:33:51Z

2

There are two obvious problems in the code you've posted:

processData: true. By setting this to true (the default), you're asking jQuery to attempt to turn the data you're providing into a query string, which is not what you want. Instead, you want to set this to false, which will ask jQuery to leave the data alone and pass it on to the underlying XMLHttpRequest as is, where the data will be formatted correctly as multipart/form-data.
The name argument passed to formData.append must match the name of your IFormFile parameter in the ASP.NET Core MVC Controller. You're using file in the the former and formData in the latter, so you'll need to change one of them so that they're the same.

answered Oct 9, 2018 at 13:33

Kirk Larkin

94.4k17 gold badges235 silver badges214 bronze badges

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

Collectives™ on Stack Overflow

MVC Core : Upload file through Ajax request and return JSON object without redirect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related