Is there any limitation on JavaScript Max Blob size

Question

I am trying to download a file using AJAX call. I need to use AJAX call because I have to make a post request along with that I need to send some headers from the client. As Server API is not under our control, we don't have much choice other than using AJAX. In order to show file save dialog, I am converting the byte array to blob to Object URL like shown below

var oReq = new XMLHttpRequest();
oReq.open("POST","api/operations/zip", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) { 
   var blob=new Blob([oReq.response], {type: 'application/octet-binary'}); 
   var link=document.createElement('a'); 
   link.href=window.URL.createObjectURL(blob); 
   link.download="myFileName.zip"; link.click();  
}
oReq.send(filePaths);

Now I would like to know is there any limit on Blob size we can have in JavaScript other than browser memory constraint. like is it possible to download 4 GB file if I have around 8 GB RAM.

Solution 1

The existing answer appears largely out of date.

---

Chrome (57+ it appears):

According to Chrome's Blob Storage System Design:

Blob Storage Limits

We calculate the storage limits here.

In-Memory Storage Limit

• If the architecture is x64 and NOT ChromeOS or Android: 2GB
• Otherwise: total_physical_memory / 5

Disk Storage Limit

• If ChromeOS: disk_size / 2
• If Android: disk_size / 20
• Else: disk_size / 10

Note: ChromeOS's disk is part of the user partition, which is separate from the system partition.

Minimum Disk Availability

We limit our disk limit to accomidate a minimum disk availability. The equation we use is:

min_disk_availability = in_memory_limit * 2

Example Limits

(All sizes in GB)

Device          | Ram | In-Memory Limit | Disk | Disk Limit | Min Disk Availability
----------------+-----+-----------------+------+------------+----------------------
Cast            | 0.5 | 0.1             | 0    | 0          | 0
Android Minimal | 0.5 | 0.1             | 8    | 0.4        | 0.2
Android Fat     | 2   | 0.4             | 32   | 1.5        | 0.8
CrOS            | 2   | 0.4             | 8    | 4          | 0.8
Desktop 32      | 3   | 0.6             | 500  | 50         | 1.2
Desktop 64      | 4   | 2               | 500  | 50         | 4

To clarify, disk_size is apparently the total disk size, not the available disk space (probably for privacy reasons, but seems like that could cause problems).

Chrome uses a directory called blob_storage in the Chrome profile directory to store blob parts to disk.

I'm not sure if or how some other limits are imposed if available disk space or available RAM are less than the software limits. I'll update this answer when I know more.

---

Opera (44+ or perhaps earlier):

Same as Chrome, as it is based on Chromium.

---

Firefox (53+ or perhaps earlier):

No apparent hard limit. I am able to create Blob's significantly larger than the "800 MiB" FileSaver.js claims. It does not use disk space to back larger blobs, so it all goes in memory, potentially with the operating system paging memory to disk. This means that blobs larger than memory may be possible, though likely with bad performance.

---

Safari (10.1+ or perhaps earlier):

No apparent hard limit. It does not use disk space to back larger blobs, so it all goes in memory, potentially with the operating system paging memory to disk. This means that blobs larger than memory may be possible, though likely with bad performance.

---

Other browser limits will be added as I learn them.

Solution 2

Blobs appear to be limited to 500MiB in Chrome and are currently stored in memory, though a redesign is in progress:

https://code.google.com/p/chromium/issues/detail?id=375297

Other browser implementations have slightly different limits:

https://github.com/eligrey/FileSaver.js/#supported-browsers

Comments

[Vikash]

Thanks Klaus for the link. Its very helpful. I can't vote up your answer as I dont have enough reputation because i am new here. I will create some test cases to test across other browser.

[NikxDa]

This answer is outdated, refer to the answer from @Alexander O'Mara

[diegocr]

Hi, do you know if there is some way to dynamically query such limit from JS, similar to FileSystem API's queryUsageAndQuota()?

[Alexander O'Mara]

@diegocr I wish, but I don't think there is.

[HaveSpacesuit]

I wonder if anyone knows the documentation for IE? Experimentally it seems 200MB might be the limit.