6

I have implemented angular file saver into my project with purpose to download files and it works fine for small files, but for files larger then 50mb I see next error and downloading stops after 35-50mb.

net::ERR_INCOMPLETE_CHUNKED_ENCODING

I have tried to investigate this question in internet and have found that there is a limit 500mb on downloading because obviously cannot be stored so much information in RAM. Unfortunately I didn't find any other quite explanation how to resolve this issue, then I have asked the back-end guy and I've got the answer that everything is fine on his side.

So where is my problem? and how can I resolve this issue? I appreciate any help

here is part of my code:

services

 function attachment(obj) {
        custom.responseType = "arraybuffer";
        delete  custom.params.limit;
        delete  custom.params.offset;
        delete  custom.params.orderBy;
        delete  custom.params.insertedAt;

        var contentType = obj.mimeType;
        var name =  obj.displayFilename;

        return $http.get(Config.rurl('attachments') + '/' + obj.bucketName + '/' + obj.path + '?displayFilename=' + obj.displayFilename, custom)
            .then(function (response) {
                var data = new Blob([response.data], { type: contentType });
                FileSaver.saveAs(data, name);
                delete custom.responseType
            })
            .catch(function (err) {
                delete custom.responseType;
                alert("It has happened an error. Downloading has been stopped") ;
            });
    }

controller function

$scope.download = function (obj) {
        lovServices.attachment(obj)
    }
georgeawg
  • 48,608
  • 13
  • 72
  • 95
antonyboom
  • 1,161
  • 2
  • 17
  • 44
  • Did you solve this? i was trying to download an excel and get the same issue with large files. https://stackoverflow.com/questions/72636282/downloading-large-excel-file-in-angular-using-xlsx-libraryneterr-incomplete-c – user2868864 Jun 15 '22 at 20:42

1 Answers1

7

Instead of downloading to memory and converting to blob. Set the responseType to 'blob':

//SET responseType to 'blob'
var config = { responseType: ̶'̶a̶r̶r̶a̶y̶b̶u̶f̶f̶e̶r̶'̶ ̶ 'blob' };

return $http.get(url, config)
    .then(function (response) {
        ̶v̶a̶r̶ ̶d̶a̶t̶a̶ ̶=̶ ̶n̶e̶w̶ ̶B̶l̶o̶b̶(̶[̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶]̶,̶ ̶{̶ ̶t̶y̶p̶e̶:̶ ̶c̶o̶n̶t̶e̶n̶t̶T̶y̶p̶e̶ ̶}̶)̶;̶
        //USE blob response 
        var data = response.data;
        FileSaver.saveAs(data, name);
    })
    .catch(function (err) {
        alert("It has happened an error. Downloading has been stopped") ;
        throw err;
    });

This avoids the memory overhead of converting the stream to arraybuffer and then making a blob again.

For more information, see MDN XHR API ResponseType.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • 1
    Since this is an AJAX request, the complete file contents will have to be loaded into the browser's memory before saveAs() is called, right? So that means for very large files refreshing the page will lose all file content? – losmescaleros Aug 04 '17 at 18:07
  • 1
    [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) is an asynchronous exotic object similar to a stream. [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) is a memory object. By setting the [XHR responseType](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType) to Blob, the step of loading it into JavaScript memory is avoided. JavaScript passes the stream to FileSaver before it is loaded. – georgeawg Aug 23 '17 at 16:04