Angular - How to resolve error while downloading file from Web API

Question

I have a project with ASP.NET Core-6 Web API as backend and Angular-14 as frontend.

I am downloading a PDF file. The code is shown below:

Backend: ASP.NET Core-6 Web API:

public async Task<IActionResult> GetLeaveDocuments(Guid id)
{
    try
    {
        var leaveAttachment = _dbContext.LeaveApplications
            .Include(ma => ma.LeaveApproval)
            .ThenInclude(ma => ma.LeaveApprovalAttachments)
            .Where(ma => (bool)ma.IsApproved)
            .SelectMany(ma => ma.LeaveApproval.LeaveApprovalAttachments)
            .FirstOrDefault(maa => maa.Id == id);
        var filePath = Path.Combine(Directory.GetCurrentDirectory(), leaveAttachment.FilePath);
        var memory = new MemoryStream();
        using (var stream = new FileStream(filePath, FileMode.Open))
        {
            await stream.CopyToAsync(memory);
        }
        memory.Position = 0;
        var contentType = "application/octet-stream";
        var fileName = Path.GetFileName(filePath);
        return File(memory, contentType, fileName);
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"Internal server error: {ex}");
    }
}

Angular:

service:

getLeaveDocument(id: string): Observable<Blob> {
  return this.http.get(`${this.baseUrl}/download-leave-document-by-id/${id}`, {
    responseType: 'blob'
  });
}

component.ts:

  downloadFile(id: string, contentType:string){
    this.leaveService.getLeaveDocument(id).subscribe({
      next: (res: Blob) => {
        const blob = new Blob([res], {type: contentType});
        const url = window.URL.createObjectURL(blob);
        window.open(url);
      }
    })
  }

component.html:

<tr *ngFor="let mDocument of leave?.leaveApproval?.leaveApprovalAttachments; let i = index;">
  <td style="width: 60px">{{ i + 1}}.</td>
  <td>{{mDocument?.fileName || 'N/A'}}</td>
  <td>{{mDocument?.fileType || 'N/A'}}</td>
  <td><input type="button" class="btn btn-success" (click)="downloadFile(mDocument.id, mDocument.mimeType)" value="Download"/></td>
</tr>

When I click on Document, I expected to download the leave document, but got this error on Angular console:

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null,
        "headers": {}
    },
    "status": 404,
    "statusText": "OK",
    "url": "https://localhost:44361/api/v1/download-leave-document-by-id/88f88414-e171-45db-8a8c-71456f251f83",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for https://localhost:44361/api/v1/download-leave-document-by-id/88f88414-e171-45db-8a8c-71456f251f83: 404 OK",
    "error": {}
}

What could be wrong and How do I resolve it?

Thanks.

Does https://localhost:44361/api/v1/download-leave-document-by-id/{id} route to GetLeaveDocuments? — ProgrammingLlama
– ProgrammingLlama, Commented Oct 6, 2022 at 8:46
Hi @Ayobamilaye, how is your controller like? And does your action contain any route attribute? 404 means your request url is not correct. — Rena
– Rena, Commented Oct 7, 2022 at 7:05

WisdomSeeker · Accepted Answer · 2022-10-06 09:03:26Z

1

Ideally, Status 404 indicates the API being called is not found. So, verify if the route provided for the controller/endpoint matches with the route being invoked from the UI.

answered Oct 6, 2022 at 9:03

WisdomSeeker

9446 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - How to resolve error while downloading file from Web API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related