Браузер не показывает индикатор выполнения при загрузке файла - PullRequest
1 голос
/ 04 апреля 2019

У меня есть приложение 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 МБ. Сервер в данный момент отправляет данные, но панель загрузки не отображается.

The size keeps incrementing, but there's no progress indication

Затем, как только загрузка будет завершена, файл появится на панели загрузки в нижней части экрана.

The file shows up but only at the end

Как я могу отправить файл в браузер, чтобы он показывал этот индикатор пользователю?

Большое спасибо.

EDIT:

Как указал @CodeCaster, перенаправление на URL-адрес может работать, однако мой URL-адрес защищен, так что скачивать файл могут только подключенные пользователи.

...