Downloading files using AJAX method

Question

Hi,

I have a list uploaded files which is displaying inside a form. What to acheive is ,need to download these files, without submitting the form

I tried to implement the ajax method to download action. This is the html code

<button class="badge badge-primary badge-pill" value="@item.Name" id="FileDownloadBtn">Download</button>  

AJAX call

$("#FileDownloadBtn").click(function () {  
        event.preventDefault();  
        var rootPath = '@Url.Content("~")';  
        $.ajax({  
            type: "post",  
            url: rootpath + "/RequestFormEdit?handler=FileDownload",  
            success: function (data) {  
  
            }  
  
        })  
    })  

I am getting issue in the handler method(commented line)

public JsonResult OnPostFileDownload(string filename)  
        {  
            string DownloadFileName = filename;  
            if (filename != null)  
            {  
                var Folder = RequestID.ToString();  
                string fileview = Path.Combine(_env.WebRootPath, "Documents", Folder, filename);  
                WebClient User = new WebClient();  
                Byte[] fileBuffer = System.IO.File.ReadAllBytes(fileview);  
                if (fileBuffer != null)  
                {  
                    //return File(fileBuffer, "application/octet-stream", filename);  
                }  
            }  
            return null;  
              
        }  

Any help would be appreciated.

Thanks,
Teena

Answer 1

AJAX is the wrong approach. Simply do an HTTP GET to the an action that returns a file.

public IActionResult FileHandler(string id)
{
    //look up the Id 
    var path = Path.Combine(Environment.ContentRootPath, @$"wwwroot/Content/{id}");
    var fileStream = System.IO.File.OpenRead(path);
    return File(fileStream, "application/octet-stream");
}

JavaScript/jQuery

    $('.download').click(function (e) {
        e.preventDefault();
        location.href = 'file/FileHandler/' + this.value
    });

Markup

<div>
    <button class="badge badge-primary badge-pill download" value="lespaul.jpg">Download</button>
</div>

Answer 2

You did not include the file name in the post data

         $.ajax({
             type: "post",
             url: rootpath + "/RequestFormEdit?handler=FileDownload",
             data: {filename: this.value },
             success: function (data) {