I have a JS library that is responsible to perform the download of JPEG images for the client. All of this is done asynchronously. In some cases, the count of images is really large... Around 5000 images. In this case, the Chrome browser issues the "ERR_INSUFFICIENT_RESOURCES" error for the ajax request.

Each request must be done individually, there is no option to pack the images on the server-side.

What are my options here? How can I find a workaround for this problem? The download works fine in Firefox...

Attached code of the actual download:

function loadFileAndDecrypt(fileId, key, type, length, callback, obj) {     

 var step = 100 / length;

 eventBus.$emit('updateProgressText', "downloadingFiles");


  var req = new dh.crypto.HttpRequest();
    req.setAesKey(key);
    let dataUrl;
    
    if (type == "study")  {
         dataUrl = "/v1/images/";
    }else {
         dataUrl = "/v1/dicoms/";
    }    

    var url = axios.defaults.baseURL + dataUrl + fileId;
    req.open("GET", url, true);
    req.setRequestHeader("Authorization", authHeader().Authorization+"")
    req.setRequestHeader("Accept", "application/octet-stream, application/json, text/plain, */*");
    req.responseType = "arraybuffer";

    req.onload = function() {
        console.log(downloadStep);    
        downloadStep +=  step;
        eventBus.$emit('updatePb', Math.ceil(downloadStep));

        var data = req.response;
        obj.push(data);
        counter ++;        
        //last one
        if (counter == length) {        
            callback(obj);        
        }
    };

    req.send();
}

I have a JS library that is responsible to perform the download of JPEG images for the client. All of this is done asynchronously. In some cases, the count of images is really large... Around 5000 images. In this case, the Chrome browser issues the "ERR_INSUFFICIENT_RESOURCES" error for the ajax request.

Each request must be done individually, there is no option to pack the images on the server-side.

What are my options here? How can I find a workaround for this problem? The download works fine in Firefox...

Attached code of the actual download:

function loadFileAndDecrypt(fileId, key, type, length, callback, obj) {     

 var step = 100 / length;

 eventBus.$emit('updateProgressText', "downloadingFiles");


  var req = new dh.crypto.HttpRequest();
    req.setAesKey(key);
    let dataUrl;
    
    if (type == "study")  {
         dataUrl = "/v1/images/";
    }else {
         dataUrl = "/v1/dicoms/";
    }    

    var url = axios.defaults.baseURL + dataUrl + fileId;
    req.open("GET", url, true);
    req.setRequestHeader("Authorization", authHeader().Authorization+"")
    req.setRequestHeader("Accept", "application/octet-stream, application/json, text/plain, */*");
    req.responseType = "arraybuffer";

    req.onload = function() {
        console.log(downloadStep);    
        downloadStep +=  step;
        eventBus.$emit('updatePb', Math.ceil(downloadStep));

        var data = req.response;
        obj.push(data);
        counter ++;        
        //last one
        if (counter == length) {        
            callback(obj);        
        }
    };

    req.send();
}

• javascript
• ajax
• vue.js
• asynchronous

• 1 I suggest reading this: stackoverflow.com/questions/44493340/… – djcaesar9114 Commented Oct 29, 2021 at 8:10
• How are you sending the requests? In a tight loop? 5000 at once? – Salman Arshad Commented Nov 3, 2021 at 10:23
• To add to what Salman A is asking, could you add the code (particularly the loop) that is calling loadFileAndDecrypt? Also does the error appear immediately, or after downloading some files? – Steve Commented Nov 3, 2021 at 23:29

2 Answers 2

The error means your code is overloading your memory (most likely, or the quota of pending requests was exhausted). Instead of sending all the data from the backend, make your frontend request for 5000 individual images instead and control the requests flow. regardless, downloading 5000 images is bad. You should pack them up for downloading. If you mean fetching the images, then loading images from the frontend through static or dynamic links is much more logical ;)

Create a class:

• Which accepts the file-Id (image that needs to be downloaded) as an argument
• Which can perform the HTTP API request
• Which can store the result of the request

Create an array of objects from this class using how many ever file-Ids that needs to be downloaded.

Store the array in a RequestManager which can start and manage the downloads:

• can batch the downloads, say it fires 5 requests from the array and waits for them to finish before starting the next batch
• can stop the downloads on multiple failures
• manipulate batch size depending on the available bandwidth
• stops download on auth expiry and resumes on auth refresh
• offers to retry the previously failed downloads