У меня есть приложение Angular с веб-API ASP.NET.
Я хочу загрузить файл, хранящийся на моем сервере. В настоящее время этот код у меня есть:
[HttpGet]
[Route("downloadFile")]
[JwtAuthentication] //Only a connected user can download the file
public async Task<HttpResponseMessage> DownloadFile(string path)
{
HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
var fileStream = File.OpenRead(path);
result.Content = new StreamContent(fileStream);
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
result.Content.Headers.ContentLength = fileStream.Length;
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = fileStream.Name,
Size = fileStream.Length
};
return result;
}
А в моем угловом коде:
// file-navigation.service.ts
downloadFile(file: FileElement) {
const data = { path: this.formatPath(true) + file.name };
return this.http.get(this.apiUrl + '/downloadFile', { params: data, responseType: 'blob' });
}
// file-navigation.component.ts
this.fileNavigationService.downloadFile(element).subscribe(result => {
this.generateDownload(element, result, false);
});
generateDownload(element: FileElement, blob: Blob, isArchive: boolean) {
const fileName = element != null ? element.name : 'Archive';
if (navigator.appVersion.toString().indexOf('.NET') > 0) {
window.navigator.msSaveBlob(blob, fileName + (isArchive ? '.zip' : ''));
} else {
const link = document.createElementNS(
'http://www.w3.org/1999/xhtml',
'a'
);
(link as any).href = URL.createObjectURL(blob);
(link as any).download = fileName + (isArchive ? '.zip' : '');
document.body.appendChild(link);
link.click();
setTimeout(function () {
document.body.removeChild(link);
link.remove();
}, 100);
}
}
С этим я успешно скачиваю файл с сервера.
Однако панель загрузки в Chrome появляется только после завершения загрузки. Поэтому, если файл слишком велик, пользователь не получит никаких признаков того, что его файл в данный момент загружается.
Ниже приведен скриншот загружаемого файла размером 16 МБ. Сервер в данный момент отправляет данные, но панель загрузки не отображается.
Затем, как только загрузка будет завершена, файл появится на панели загрузки в нижней части экрана.
Как я могу отправить файл в браузер, чтобы он показывал этот индикатор пользователю?
Большое спасибо.
EDIT:
Как указал @CodeCaster, перенаправление на URL-адрес может работать, однако мой URL-адрес защищен, так что скачивать файл могут только подключенные пользователи.