send/public/download.js

function download() {
  var xhr = new XMLHttpRequest();
  xhr.open('get', '/assets' + location.pathname.slice(0, -1), true);
  xhr.responseType = 'blob';

  var li = document.createElement('li');
  var progress = document.createElement('p');
  li.appendChild(progress);
  document.getElementById('downloaded_files').appendChild(li);

  xhr.addEventListener('progress', returnBindedLI(li, progress));

  xhr.onload = function(e) {
    // maybe send a separate request before this one to get the filename?

    // maybe render the html itself with the filename, since it's generated server side
    // after a get request with the unique id
    var name = document.createElement('p');
    name.innerHTML = xhr
      .getResponseHeader('Content-Disposition')
      .match(/filename="(.+)"/)[1];
    li.insertBefore(name, li.firstChild);

    if (this.status == 200) {
      let self = this;
      var blob = new Blob([this.response]);
      var arrayBuffer;
      var fileReader = new FileReader();
      fileReader.onload = function() {
        arrayBuffer = this.result;
        var array = new Uint8Array(arrayBuffer);
        salt = strToIv(location.pathname.slice(10, -1));

        window.crypto.subtle
          .importKey(
            'jwk',
            {
              kty: 'oct',
              k: location.hash.slice(1),
              alg: 'A128CBC',
              ext: true
            },
            {
              name: 'AES-CBC'
            },
            true,
            ['encrypt', 'decrypt']
          )
          .then(function(key) {
            window.crypto.subtle
              .decrypt(
                {
                  name: 'AES-CBC',
                  iv: salt
                },
                key,
                array
              )
              .then(function(decrypted) {
                var dataView = new DataView(decrypted);
                var blob = new Blob([dataView]);
                var downloadUrl = URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = downloadUrl;
                a.download = xhr
                  .getResponseHeader('Content-Disposition')
                  .match(/filename="(.+)"/)[1];
                document.body.appendChild(a);
                a.click();
              })
              .catch(function(err) {
                alert(
                  'This link is either invalid or has expired, or the uploader has deleted the file.'
                );
                console.error(err);
              });
          })
          .catch(function(err) {
            console.error(err);
          });
      };
      fileReader.readAsArrayBuffer(blob);
    } else {
      alert(
        'This link is either invalid or has expired, or the uploader has deleted the file.'
      );
    }
  };
  xhr.send();
}

function ivToStr(iv) {
  let hexStr = '';
  for (var i in iv) {
    if (iv[i] < 16) {
      hexStr += '0' + iv[i].toString(16);
    } else {
      hexStr += iv[i].toString(16);
    }
  }
  window.hexStr = hexStr;
  return hexStr;
}

function strToIv(str) {
  var iv = new Uint8Array(16);
  for (var i = 0; i < str.length; i += 2) {
    iv[i / 2] = parseInt(str.charAt(i) + str.charAt(i + 1), 16);
  }

  return iv;
}

function returnBindedLI(li, progress) {
  return function updateProgress(e) {
    if (e.lengthComputable) {
      var percentComplete = Math.floor(e.loaded / e.total * 100);
      progress.innerHTML = 'Progress: ' + percentComplete + '%';
    }

    if (percentComplete === 100) {
      var finished = document.createElement('p');
      finished.innerHTML = 'Your download has finished.';
      li.appendChild(finished);

      var close = document.createElement('button');
      close.innerHTML = 'Ok';
      close.addEventListener('click', function() {
        document.getElementById('downloaded_files').removeChild(li);
      });

      li.appendChild(close);
    }
  };
}