Download files in Razor Pages by AJAX method - ajax

Question

I have a form with large no:of fields to input data.
The Page also has file upload option like below
Want to download the files without submitting this form and also without refreshing this page. what have done so far is
#if (Model.AttachForms != null)
{
<div class="form-row mt-1">
<div class="col-md-12">
<ul class="list-group">
#foreach (var item in Model.AttachForms)
{
<li class="list-group-item d-flex justify-content-between align-items-center pt-1 pb-1">
#Html.DisplayFor(modelItem => item.Name)
<button class="badge badge-primary badge-pill" value="#item.Name" id="FileDownloadBtn">Download</button>
</li>
}
</ul>
</div>
</div>
}
Javascript Code
$("#FileDownloadBtn").click(function () {
event.preventDefault();
var rootPath = '#Url.Content("~")';
$.ajax({
type: "post",
url: rootPath + "/RequestFormEdit?handler=FileDownload",
data: { filename: this.value },
success: function (data) {
}
})
})
cshtml.cs
public IActionResult 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;
}
My doubt is how can to pass this file content data as json string and download the file as same as the uploaded format.
Edited
Edited the filedownload button with formdata, but still its not working.
My doubt is i am passing file name in the download button like below
<ul class="list-group">
#foreach (var item in Model.AttachForms)
{
<li class="list-group-item d-flex justify-content-between align-items-center pt-1 pb-1">
#Html.DisplayFor(modelItem => item.Name)
<button class="badge badge-primary badge-pill" value="#item.Name" id="FileDownloadBtn">Download</button>
</li>
}
</ul>
Do i need to give get().files in jquery?
$("#FileDownloadBtn").click(function () {
event.preventDefault();
var formData = new FormData();
var rootPath = '#Url.Content("~")';
var files = $("#FileDownloadBtn").get(0).files;
formData.append('Files', files[0]);
$.ajax({
type: "post",
url: rootPath + "/RequestFormEdit?handler=FileDownload",
data: formData,
processData: false,
contentType: false,
success: function (data) {
}
})
})
This is my backend code to download
public IActionResult FileDownload(string filename)
{
//string DownloadFileName = filename;
if (filename != null)
{
var Folder = RequestFormMaster.RequestID.ToString();
var fileUploadPath = _fileuploadurl;
string fileview = Path.Combine(fileUploadPath, 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;
}
FILE UPLOAD
<div class="col-sm-4 mb-2 pl-sm-2" >
<label class="pl-4 pt-2"><b>Upload Attachments</b></label>
<div class="form-row" style="border:3px dashed #D3D3D3;outline-offset:-10px;height:75px;border-radius:5px;">
<div class="col-md-12">
<label for="attachment" style="padding: 15px 145px;">
<a class="btn" style="background-color:#E9ECEF;" role="button" aria-disabled="false">Click here to upload files</a>
</label>
<input id="attachment" style="visibility: hidden; position: absolute; display: block;" type="file" asp-for="ReqSupportingFiles" multiple>
</div>
</div>
#if (Model.AttachForms != null)
{
<div class="form-row mt-1">
<div class="col-md-12">
<ul class="list-group">
#foreach (var item in Model.AttachForms)
{
<li class="list-group-item d-flex justify-content-between align-items-center pt-1 pb-1">
#Html.DisplayFor(modelItem => item.Name)
<button class="badge badge-primary badge-pill" value="#item.Name" id="FileDownloadBtn">Download</button>
</li>
}
</ul>
</div>
</div>
}
<div class="form-row mt-1">
<div class="col-md-12">
<p id="files-area">
<span id="filesList">
<span id="files-names"></span>
</span>
</p>
</div>
</div>
</div>