Problems downloading big file(max 15 mb) on google chrome

javascript angularjs google-chrome ruby-on-rails-4

This is an almost duplicate of these questions 1 and 2, but since they do deal particularly with the canvas element, I'll rewrite a more global solution here.

This problem is due to a size limit chrome has set in the anchor (<a>) download attribute. I'm not quite sure why they did it, but the solution is pretty easy.

Convert your dataURI to a Blob, then create an ObjectURL from this Blob, and pass this ObjectURL as the anchor's download attribute.

// edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfillfunction dataURIToBlob(dataURI) {  var binStr = atob(dataURI.split(',')[1]),    len = binStr.length,    arr = new Uint8Array(len),    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]  for (var i = 0; i < len; i++) {    arr[i] = binStr.charCodeAt(i);  }  return new Blob([arr], {    type: mimeString  });}var dataURI_DL = function() {  var dataURI = this.result;  var blob = dataURIToBlob(dataURI);  var url = URL.createObjectURL(blob);  var blobAnchor = document.getElementById('blob');  var dataURIAnchor = document.getElementById('dataURI');  blobAnchor.download = dataURIAnchor.download = 'yourFile.mp4';  blobAnchor.href = url;  dataURIAnchor.href = dataURI;  stat_.textContent = '';  blobAnchor.onclick = function() {    requestAnimationFrame(function() {      URL.revokeObjectURL(url);    })  };};// That may seem stupid, but for the sake of the example, we'll first convert a blob to a dataURI...var start = function() {  stat_.textContent = 'Please wait while loading...';  var xhr = new XMLHttpRequest();  xhr.responseType = 'blob';  xhr.onload = function() {    status.textContent = 'converting';    var fr = new FileReader();    fr.onload = dataURI_DL;    fr.readAsDataURL(this.response);  };  xhr.open('GET', 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4?dl=0');  xhr.send();  confirm_btn.parentNode.removeChild(confirm_btn);};confirm_btn.onclick = start;

<button id="confirm_btn">Start the loading of this 45Mb video</button><span id="stat_"></span><br><a id="blob">blob</a><a id="dataURI">dataURI</a>

Expand snippet