CODEWITHSUNDEEP
angulargoogle-chrome
Benjamin D.
Benjamin D.

Reputation: 410

Angular fail to download file > 10MB from server on Google Chrome

I'm using a service in my Angular 6 App to download a file (blob) from my REST API. This service works perfectly with files < 10MB (on Chrome and other browsers). I'm currently trying to download a 14MB file and it fails, only on Chrome (works as intended with Firefox)

I think it is a Chrome limitation but I can't find any information about this on SO or Angular docs.

Here is my service

displayFile(url: string) {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    this.http.post('my_backend_path/getFile', JSON.stringify({urlData: url}), {responseType: "blob", headers})
      .subscribe((data: any) => {
          var urlBlob = window.URL.createObjectURL(data);
          window.open(urlBlob);
        },
        (error) => {
          //Here comes the error
        });
  }

My Node REST API returns the file properly with a 200 status. The fail comes in Chrome console, like this :

POST my_backend_path/getFile net::ERR_FAILED 200 (OK)

In the chrome's network debugger, I can read that the file size is estimated to exactly 10.0MB (whereas the file is doing 14MB actually). That is why I think this is due to some Chrome or Angular HTTPClient limitation.

Does anyone have an idea ?

Upvotes: 10

Views: 9825

Answers (4)

VJay
VJay

Reputation: 69

I have gone through this issue very recently. Download works in incognito but not in normal model. Here is my suggestion. Add timeout to your call like this :

    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    this.http.post('my_backend_path/getFile', JSON.stringify({urlData: url}), {responseType: "blob", headers})
      .pipe(timeout(50000))
      .subscribe((data: any) => {
          var urlBlob = window.URL.createObjectURL(data);
          window.open(urlBlob);
        },
        (error) => {
          //Here comes the error
        });
  }

import timeout from import { timeout } from 'rxjs/operators'; if you need to. you may have to install rxjs-compat package dependency as needed.

Upvotes: 0

Alex des Pelagos
Alex des Pelagos

Reputation: 1475

I had this problem - Chrome logged net::ERR_FAILED 200 (OK) on API call which returned over 10mb of json. Surprisingly it worked in Incognito mode and no one around was affected.

The solution in my case was to clean up C: drive. It had low disk space (around 200 Mb). After the disk cleanup Chrome started to behave.

Upvotes: 11

user12275432
user12275432

Reputation: 21

Faced the exact same problem. But strangely enough, the download works fine in Incognito-mode of chrome. You may try the same.

Upvotes: 2

Mo&#239;se Coulanges
Mo&#239;se Coulanges

Reputation: 81

I think you need to change the responseType : to ArrayBuffer. It works for me

{responseType: "arrayBuffer", headers})

Upvotes: 8

Related Questions