CODEWITHSUNDEEP
javascriptdownloadbase64
Zachary Litzinger
Zachary Litzinger

Reputation: 61

Download a base64 encoded video loaded via ajax

I am trying to allow users to download video files which are base64 encoded and loaded via ajax

I am currently attempting to set a href of an anchor to downloaded the file's base64 encoded data as a binary file with a preset name.

here's an example page where I am attempting(and failing) to do this https://static.pdglobal.net/?sid=bookmark-direct-access&ACCESSID=e44cba00e3950d1d903aafbe0954e4706a60503e

I expect clicking the download button to open a file save window with the filename specified in the "DOWNLOAD" attribute.

here is the full code


<html>
<head>
<script src="/cdn-cgi/apps/head/zcIqU0I5shRoh4MdCp-ByLrC2u0.js"></script></head>
<body bgcolor="#000000" style="color:#FFFFFF;">
<center><div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #000000 url('https://static.pdglobal.net/?sid=files_go&ID=loading_small') no-repeat center;"><video id="player" autoplay="true" preload="none" loop="true" poster="data:image/gif,AAAA"><source id="track1" /></video><br /><br /><a href="#" id="download" style="display:none;"><button>DOWNLOAD</button></a></center>
</div>
<script type="efcb47698f02567244c34694-text/javascript">
window.onload = function get_body() {
  document.getElementsByTagName('body')[0].style.minHeight = "97%";
  document.getElementById('track1').type = "video/mp4"
  var xhttp2 = new XMLHttpRequest();
  xhttp2.onreadystatechange = function() {
    if (xhttp2.readyState == 4 && xhttp2.status == 200) {
        document.getElementById('track1').src = 'data:video/mp4;base64,'+xhttp2.responseText;
        document.getElementById('download').setAttribute('href', 'data:application/octet-stream;base64,'+xhttp2.responseText);
        document.getElementById('download').setAttribute('DOWNLOAD', 'e44cba00e3950d1d903aafbe0954e4706a60503e.mp4');
        document.getElementById('download').style.display = "block"
     var att = document.getElementById('player').setAttribute('controls','');
     document.getElementById('player').load();
    }
  };
  xhttp2.open("GET", "https://static.pdglobal.net/?sid=victor-get-binary-data&HASHID=e44cba00e3950d1d903aafbe0954e4706a60503e", true);
  xhttp2.send();
}
</script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js" data-cf-settings="efcb47698f02567244c34694-|49" defer=""></script></body>
</html>

Any help would be much appreciated.

Upvotes: 0

Views: 1987

Answers (1)

Zachary Litzinger
Zachary Litzinger

Reputation: 61

I figured out how to make it work.

First I added the following functions to the head of the page

<script>
function b64toBlob(b64Data, contentType='video/mp4', sliceSize=512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

function save(filename, data) {
    var blob = b64toBlob(data);
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}
</script>

then I called the save function from the page, passing the base64 and filename to it as such:

document.getElementById('download').setAttribute('onclick', 'save("832bea8ce3bcf02eea6fa48af9b92fa6def0af5e.mp4" , "'+xhttp2.responseText+'")');

Upvotes: 1

Related Questions