Show message and download file after password verified - Razor pages - asp.net-core

Question

Before download the file, user need to enter the password. So I want to show the message if password is correct and in the same time start the download the file to the user.
public async Task<IActionResult> OnPostAsync()
{
var getFileUpload = await _context.FileUpload.FirstAsync(c => c.Guid == Guid && c.ExpiredOn.HasValue);
if (!ModelState.IsValid)
{
var message = string.Join(" | ", ModelState.Values
.SelectMany(v => v.Errors)
.Select(e => e.ErrorMessage));
return BadRequest(message);
}
if (DateTime.Today > getFileUpload.ExpiredOn.Value.AddDays(1))
{
Exception = "File already expired. Please ask administrator to share again";
return Page();
}
try
{
bool verified = BCrypt.Net.BCrypt.Verify(Password, getFileUpload.PasswordHash);
if (!verified)
{
Exception = "Password is wrong, please enter correct password";
return Page();
}
byte[] fileBytes = System.IO.File.ReadAllBytes(getFileUpload.Path);
var fileName = getFileUpload.FileName;
File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
Success = true;
return Page();
}
catch
{
Exception = "Failed to download the data";
return Page();
}
}
I can see the message, but file cannot download.
But when I change return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);, file able to download but cannot not alert the message.
Any idea how I can fix this?

Answer 1

You can verify the password with ajax first, and get the file after success. This is the pagemodel code.
public async Task<IActionResult> OnPostAsync()
{
//other code
if (true)
{
return new JsonResult("success");
}
else
{
return BadRequest();
}
}
public IActionResult OnGetFileAsync()
{
//get file from header
StringValues filename;
Request.Headers.TryGetValue("filename", out filename);
var stream = System.IO.File.OpenRead("file path");
string fileExt = Path.GetExtension("1.png");
var provider = new FileExtensionContentTypeProvider();
var memi = provider.Mappings[fileExt];
return File(stream, memi, Path.GetFileName("filename"));
}
Ajax in the page.
function verify() {
$.ajax({
url: '/?handler',
method: 'post',
headers: {
RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
},
success: function (data,status) {
fetch("/?handler=file", {
//Write the filename to be obtained into the http header
headers: {
'filename': data
}
}).then(res => res.blob().then(blob => {
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = res.headers.get('content-disposition').split(';')[1].split('=')[1]
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}));
//set successful message
},
error: function () {
console.log('e')
//set the error message in the page
}
})
}