0

Hello everyone I'm trying to download a file using this method in my controller :

    [HttpGet]
    [Route("download/{id}&{bid}")]
    public async Task<IActionResult> Download(int id,int bid)
    {
        string filePath = _context.ConnectionDB.FirstOrDefault(r => r.Id == id).FolderName; 
        string fileName = _context.SavedBackups.FirstOrDefault(r => r.Id == bid).PathOfSave;
        byte[] fileBytes = System.IO.File.ReadAllBytes(filePath+fileName);

        return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
    }

When debugging I get the Path of the combination: filePath+fileName, and my fileBytes contain values.

Anyway when I try using this on my FrontEnd client:

I'm using this function in my service to get the info from my backend:

  downloadBackupDB(dbConn: DBconnection, idSave: number): Observable<any> {
    const url =
      `${this.backupRestoreUrl}/` + `download/` + `${dbConn.id}&${idSave}`;
    return this.http.get(url);
  }

And in my component I have tried to view the response value with this function:

onDownload(idOfDownload) {
    console.log('Download file id:', idOfDownload);
    console.log('Conn id:', this.dbConn.id);
    this.dbConnService
      .downloadBackupDB(this.dbConn, idOfDownload)
      .subscribe((res) => {
        console.log('resultat:', res);
    const blob = new Blob([res], { type: 'application/octet-stream' });

    this.sanitizer.bypassSecurityTrustResourceUrl(
      window.URL.createObjectURL(blob)
    );
      });
  }

But it's giving me the following error:

enter image description here

If there is a better solution or any ideas don't hesitate to share with me and the community, thanks everyone ! :)

I have tried using this example which apprentelly does work: example

EDIT: (this worked for me)

I have changed my function in the service into:

  downloadBackupDB(dbConn: DBconnection, idSave: number): Observable<any> {
    const url =
      `${this.backupRestoreUrl}/` + `download/` + `${dbConn.id}&${idSave}`;
    return this.http.get(url, { responseType: 'blob' });
  }

And my function in the component to:

onDownload(idOfDownload) {
    console.log('Download file id:', idOfDownload);
    console.log('Conn id:', this.dbConn.id);

    this.dbConnService
      .downloadBackupDB(this.dbConn, idOfDownload)
      .subscribe((res) => {
        console.log('res:', res);
        window.open(window.URL.createObjectURL(res));
      });
  }

Now it gives me the file to download but in a different name:

enter image description here

But in the function on the Backend I'm returning my file name, how do I get it now?

Hasagiii
  • 345
  • 1
  • 3
  • 21
  • 1
    Does this answer your question? [Angular: How to download a file from HttpClient?](https://stackoverflow.com/questions/51682514/angular-how-to-download-a-file-from-httpclient) – R. Richards Apr 10 '20 at 11:46
  • I have done something similar but that's not the problem I think, do u see that text in the console? it's giving binary values, but it doesn't show I dont know why to be honnest :/ – Hasagiii Apr 10 '20 at 11:56
  • I'm noticing that it's throwing a JSON parse error, almost wondering if there's something causing the controller method to be returning a JSON object rather than a stream, or the response is *expecting* a JSON object instead of a file stream (string of bytes). Is there any need to decorate the controller method to ensure it returns JSON? – David W Apr 10 '20 at 12:26
  • Can u please look at the edits I have made I solved that problem :) – Hasagiii Apr 10 '20 at 12:31
  • I was going to suggest casting the return from the controller to a FileStreamResult but it appears you've solved the problem. – David W Apr 10 '20 at 12:33
  • Yes, but I still can't get the name of the file if u can help :/ – Hasagiii Apr 10 '20 at 12:46

0 Answers0