Saving video files corrupts them

[r3plica]

Hey,

So I have added ngx-filesaver to my angular application and it downloads images fine, but with videos it doesn't work properly. I does download the video, but when I try to play it, it says the video is corrupted. I can play the video in the browser (before downloading). The code I have looks like this:

public download(asset: SimpleResourceBase): void {
  const parts = asset.secureUrl.split('.');
  if (parts.length === 1) return;

  const extension = parts[parts.length - 1];

  this.httpClient
    .get<Blob>(asset.secureUrl, {
      observe: 'body',
      responseType: 'blob' as 'json',
    })
    .subscribe((response) => {
      console.log(response);
      this.fileSaverService.save(
        <any>response,
        `${asset.fileName}.${extension}`
      );
    });
}

and the SimpleResourceBase looks like this:

export declare class SimpleResourceBase {
    id: string;
    publicId: string;
    normalisePublicId: string;
    folder: string;
    fileName: string;
    indexUrl: string;
    url: string;
    secureUrl: string;
}

Is there something I have to do differently, to get the video to download?

[cipchk]

Maybe using the wrong type.

- this.fileSaverService.save(<any>response, `${asset.fileName}.${extension}`);
+ this.fileSaverService.save(<any>response, `${asset.fileName}.${extension}`, 'video/mp4');

[r3plica]

Nah, it's not the wrong type, in the console.log(response) it shows the correct type, but I did add that and I still got the same issue.

[cipchk]

Can you trying use the save method of file-saver, This helps to tracking the problem, like this:

import { saveAs, FileSaverOptions } from 'file-saver';

saveAs(response)

[r3plica]

I updated my download method to this:

public download(asset: SimpleResourceBase): void {
  const parts = asset.secureUrl.split('.');
  if (parts.length === 1) return;

  const extension = parts[parts.length - 1];

  this.httpClient
    .get<Blob>(asset.secureUrl, {
      observe: 'body',
      responseType: 'blob' as 'json',
    })
    .subscribe((response) => {
      console.log(response);
      // this.fileSaverService.save(
      //   <any>response,
      //   `${this.getFilename(asset.fileName)}.${extension}`
      // );
      saveAs(response, `${this.getFilename(asset.fileName)}.${extension}`);
    });
}

And it still does the same thing:

And when I open it, it doesn't play

[cipchk]

Sorry, This looks like an issue with filesaver.js.