How to Download Image through AJAX Request In ASP.NET MVC

Question

Here is my controller:

[HttpPost]
public FileResult Download(TrainingModel pass)
{
    return File(pass.filePath, "image\jpg", "haha.jpg");
}

And here is my AJAX:

function fncDownloadImage(fileName)
{
    //passes the fileName the parameter to the Model
    var download = {'filePath' : fileName}
        $.ajax({
        type: "POST",
        url: '/Capability/Download',
        data: JSON.stringify(download),
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
}

How to download the file with the above code? When I checked the Network tab on Developer Tools the image is present on the Preview.

Answer 1

AJAX(Asynchronous JavaScript and XML) is asynchronous, to download any file from server, the request must be synchronous, ajax does not supports file downloads

for work around visit this, this will give "Ajax like" experience with file downloads