File download in Angular 6 with ASP.NET Web API

Question

We have an angular client (Angular 6) with a ASP.NET web API backend.

Requirement: To download files on the UI served by the backend. The files can be of any type - PDFs, images, docs, excel files, notepads.

The implementation is as below:

Web API

        [Route("api/Clients/{id:int}/Documents/{documentId}")]
        public HttpResponseMessage GetDocument(int id, string documentId)
        {
            string methodName = "GetDocument";
            logger.Info(methodName + ": begins. Id: " + id + ". Document Id: " + documentId);
            HttpResponseMessage response = null;

            try
            {
                var ticket = Request.Properties["Ticket"];
                var userName = ((Microsoft.Owin.Security.AuthenticationTicket)ticket).Identity.Name;
                ClientHelper clientHelper = new ClientHelper(userName);

                MemoryStream fileContent = new MemoryStream();

                //this._googleDriveManager.Get(documentId).CopyTo(fileContent);
                var fileData = this._googleDriveManager.Get(documentId);

                //Get file extension
                var document = clientHelper.GetDocumentbyDriveId(documentId);


                if (fileData.Length > 0)
                {
                    response = new HttpResponseMessage
                    {
                        StatusCode = HttpStatusCode.OK,
                        Content = new ByteArrayContent(fileData.ToArray())
                    };
                    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                    response.Content.Headers.ContentDisposition.FileName = document.FileName;
                    //response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
                    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                    response.Content.Headers.ContentLength = fileData.Length;
                }
                else
                {
                    response = Request.CreateResponse(HttpStatusCode.NotFound);
                }

            }
            catch (Exception exception)
            {
                //Log exception.
                logger.Error(methodName, exception);
                var errorModel = new { error = "There was an error." };
                response = new HttpResponseMessage();
                response.StatusCode = HttpStatusCode.InternalServerError;
            }

            logger.Info(methodName + " ends");
            return response;
        }

The Angular code is as below:

Service

import { Injectable } from '@angular/core';
import { AppSettings } from '../helpers/AppConstants';
import { HttpClient, HttpRequest, HttpEventType, HttpResponse, HttpHeaders } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

@Injectable()
export class SharedService {

  constructor(private http: HttpClient) { }

  //This method gets the details of one client.
  public getDocument(id: number, fileId: string) {
    return this.http.get(AppSettings.DOCUMENTDOWNLOAD_ENDPOINT(id, fileId),
         {responseType: 'blob' as 'json'});

  }
}

Component

import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { Document } from '../../../../models/document';
import { DocumentType } from '../../../../models/document-type';
import { SharedService } from '../../../../services/shared.service';
import { MatDialog, MatDialogConfig, MatTableDataSource, MatPaginator } from '@angular/material';

@Component({
  selector: 'app-documents',
  templateUrl: './documents.component.html',
  styleUrls: ['./documents.component.scss']
})
export class DocumentsComponent implements OnInit {

  constructor(private _sharedService: SharedService, public dialog: MatDialog) { }

  ngOnInit() {

  }

  fileDownload(document: any) {
    this._sharedService.getDocument(document.clientId, document.driveId)
      .subscribe(fileData => {
        console.log(fileData);
        let b: any = new Blob([fileData], { type: 'application/pdf' });
        var url = window.URL.createObjectURL(b);
        window.open(url);
      }
      );
  }
}

On the client, we have changed between application/pdf and application/octet-stream, and there is no difference. Essentially the content headers set on the API do not seem to matter at all, and it is just a blob with a size that is being received on the response data.

Screenshot:

When the same API endpoint is accessed via Postman and a Send & Download request is sent, the file download dialog pops up as expected - with the file name and the extension. But on the API it just shows the blob with no filename or extension.

What are we missing here?

Answer 1

Using the file-saver library resolved the issue.

https://www.npmjs.com/package/file-saver

https://shekhargulati.com/2017/07/16/implementing-file-save-functionality-with-angular-4/

The code in the service now looks like this

import { Injectable } from '@angular/core';
import { AppSettings } from '../helpers/AppConstants';
import { HttpClient, HttpRequest, HttpEventType, HttpResponse, HttpHeaders } from '@angular/common/http';
import { Observable, Subject } from 'rxjs';
import {saveFile, saveAs} from 'file-saver';
import { map, filter, catchError, mergeMap } from 'rxjs/operators';

@Injectable()
export class SharedService {
  constructor(private http: HttpClient) {}

  downloadFile(data: any, filename: string) {
    const blob = new Blob([data], { type: 'application/octet-stream' });
    saveAs(blob, filename);
  }

  //This method gets the details of one client.
  public getDocument(id: number, fileId: string, fileName: string) {

    this.http.get(AppSettings.DOCUMENTDOWNLOAD_ENDPOINT(id, fileId), {responseType: 'blob'})
      .subscribe((data) => this.downloadFile(data, fileName), error => console.log('Error downloading the file.'),
        () => console.info('OK'));
  }
}

import { Component, OnInit, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { Document } from '../../../../models/document';
import { DocumentType } from '../../../../models/document-type';
import { SharedService } from '../../../../services/shared.service';
import { MatDialog, MatDialogConfig, MatTableDataSource, MatPaginator } from '@angular/material';
import { DialogComponent } from '../upload/dialog/dialog.component';
//import 'rxjs/Rx' ;

@Component({
  selector: 'app-documents',
  templateUrl: './documents.component.html',
  styleUrls: ['./documents.component.scss']
})
export class DocumentsComponent implements OnInit {


  @Input() documentTypes: DocumentType[] = [];
  @ViewChild(MatPaginator) paginator: MatPaginator;

  @Input()
  set documents (value: Document[]) {
    if (!value) {
      value = [];
    }

  constructor(private _sharedService: SharedService, public dialog: MatDialog) { }


  fileDownload(document: any) {
    this._sharedService.getDocument(document.clientId, document.driveId, document.fileName);
  }
}