I'm having difficulty viewing downloaded png/jpg files, the file downloads properly but cannot be viewed. I think it could be related to the way I'm saving the object in typescript or something to do with content header types?
Backend: .Net Core 6.0 Web API
Frontend: Vue 3
This is the result of trying to open the downloaded image:
Fiddler trace shows the image being sent from the server:
This is how I'm downloading the file in TS:
await someService
.download(item.url, item.name)
.then(async (r: any) => {
const blob = new Blob([r.data]);
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
const disposition = r.request.getResponseHeader("Content-Disposition");
if (disposition && disposition.indexOf("attachment") !== -1) {
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
let matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) {
link.download = matches[1].replace(/['"]/g, "");
}
}
link.click();
URL.revokeObjectURL(link.href);
})
.catch((err: any) => {
showError(err);
});
This is how the server sends its response:
public IActionResult DownloadAttachmentAsync([FromQuery] DownloadAttachmentInputDto model)
{
try
{
FileStream fs = new FileStream(_pathToFile, FileMode.Open);
return File(fs, "application/octet-stream", model.FileName);
}
catch (Exception err)
{
_errorHandler.Error(_loggedInUser, err);
return BadRequest(_errorHandler.UserFriendlyErrorMessage(err));
}
}
Request/response header?:
Not sure where else to look, any help is greatly appreciated!
Via Active questions tagged javascript - Stack Overflow https://ift.tt/tpTR7Uw
Comments
Post a Comment