uncensored-send/web/static/app.js

// Progressive enhancement for the upload form. With JavaScript off the plain
// multipart POST still works; everything here is additive.
(function () {
  'use strict';

  var base = document.body.dataset.base || '/';
  var form = document.getElementById('upload');
  if (!form) return;

  var fileInput = document.getElementById('file');
  var tokenInput = document.getElementById('token');
  var drop = document.getElementById('drop');
  var dropHint = document.getElementById('drop-hint');
  var progress = document.getElementById('progress');
  var barFill = document.getElementById('bar-fill');
  var progressText = document.getElementById('progress-text');
  var submit = document.getElementById('submit');
  var errorBox = document.getElementById('error');

  // Limits as rendered for an anonymous caller; refreshed when a token is typed.
  var limits = { max_size: null, allow_vanity: false };

  function formatSize(n) {
    if (n === null || n === undefined) return 'unlimited';
    var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'], i = 0;
    while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
    return (i === 0 ? n : n.toFixed(2).replace(/\.00$/, '')) + ' ' + units[i];
  }

  function showError(msg) {
    errorBox.textContent = msg;
    errorBox.hidden = !msg;
  }

  // --- credentials --------------------------------------------------------
  // A token is remembered in an HttpOnly cookie the server sets, not here:
  // this script cannot read it back, so an injected script cannot steal it
  // either. The page is told who it is by the server when it renders, and the
  // limits panel is refreshed from /api/limits, which reads the same cookie.
  function refreshLimits() {
    var token = tokenInput ? tokenInput.value.trim() : '';

    var xhr = new XMLHttpRequest();
    xhr.open('GET', base + 'api/limits');
    xhr.setRequestHeader('Accept', 'application/json');
    // Sent only when the field holds something; otherwise the cookie answers.
    if (token) xhr.setRequestHeader('Authorization', 'Bearer ' + token);
    xhr.onload = function () {
      if (xhr.status !== 200) {
        if (xhr.status === 401 && token) showError('That token is not recognised.');
        return;
      }
      showError('');
      var l;
      try { l = JSON.parse(xhr.responseText); } catch (e) { return; }
      limits = l;
      set('limit-size', l.max_size === null ? 'unlimited' : formatSize(l.max_size));
      set('limit-expiry', l.max_expiry || 'never');
      set('limit-default', l.default_expiry || 'never');
      set('limit-vanity', l.allow_vanity ? 'allowed' : 'requires a token');
      var vanity = document.getElementById('vanity');
      if (vanity) vanity.disabled = !l.allow_vanity;
      var expiry = document.getElementById('expiry');
      if (expiry) expiry.placeholder = l.default_expiry || 'never';
    };
    xhr.send();
  }

  function set(id, text) {
    var el = document.getElementById(id);
    if (el) el.textContent = text;
  }

  if (tokenInput) {
    var debounce;
    tokenInput.addEventListener('input', function () {
      clearTimeout(debounce);
      debounce = setTimeout(refreshLimits, 400);
    });
  }
  refreshLimits();

  // --- drag and drop ------------------------------------------------------
  function describeSelection() {
    var f = fileInput.files[0];
    dropHint.textContent = f ? f.name + ' — ' + formatSize(f.size)
                             : 'Choose a file, or drop one here.';
  }

  ['dragenter', 'dragover'].forEach(function (name) {
    drop.addEventListener(name, function (e) {
      e.preventDefault();
      drop.classList.add('over');
    });
  });
  ['dragleave', 'drop'].forEach(function (name) {
    drop.addEventListener(name, function () { drop.classList.remove('over'); });
  });
  drop.addEventListener('drop', function (e) {
    e.preventDefault();
    if (!e.dataTransfer.files.length) return;
    // DataTransfer is the only way to put a dropped file into a file input.
    var dt = new DataTransfer();
    dt.items.add(e.dataTransfer.files[0]);
    fileInput.files = dt.files;
    describeSelection();
  });
  fileInput.addEventListener('change', describeSelection);

  // --- upload -------------------------------------------------------------
  form.addEventListener('submit', function (e) {
    var file = fileInput.files[0];
    if (!file) return; // let the browser's own validation speak

    if (limits.max_size && file.size > limits.max_size) {
      e.preventDefault();
      showError('That file is ' + formatSize(file.size) + '; the limit is ' +
                formatSize(limits.max_size) + '.');
      return;
    }

    e.preventDefault();
    showError('');
    submit.disabled = true;
    progress.hidden = false;

    // FormData follows DOM order, so the token, expiry and vanity fields all
    // precede the file part — which is exactly what the server requires.
    var data = new FormData(form);
    var started = Date.now();

    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action);
    xhr.setRequestHeader('Accept', 'application/json');

    xhr.upload.onprogress = function (ev) {
      if (!ev.lengthComputable) return;
      var pct = ev.loaded / ev.total;
      barFill.style.width = (pct * 100).toFixed(1) + '%';
      var elapsed = (Date.now() - started) / 1000;
      var rate = elapsed > 0 ? ev.loaded / elapsed : 0;
      var eta = rate > 0 ? (ev.total - ev.loaded) / rate : 0;
      progressText.textContent =
        (pct * 100).toFixed(0) + '% — ' + formatSize(ev.loaded) + ' of ' +
        formatSize(ev.total) + ' — ' + formatSize(rate) + '/s' +
        (eta > 1 ? ', ' + formatTime(eta) + ' left' : '');
    };

    xhr.onload = function () {
      submit.disabled = false;
      var body;
      try { body = JSON.parse(xhr.responseText); } catch (err) { body = null; }
      if (xhr.status >= 200 && xhr.status < 300 && body) {
        showResult(body);
      } else {
        progress.hidden = true;
        showError(body && body.error ? body.error : 'Upload failed (' + xhr.status + ').');
      }
    };
    xhr.onerror = function () {
      submit.disabled = false;
      progress.hidden = true;
      showError('Upload failed: the connection was lost.');
    };

    xhr.send(data);
  });

  function formatTime(s) {
    s = Math.round(s);
    if (s < 60) return s + 's';
    var m = Math.floor(s / 60);
    if (m < 60) return m + 'm ' + (s % 60) + 's';
    return Math.floor(m / 60) + 'h ' + (m % 60) + 'm';
  }

  function showResult(r) {
    var card = document.createElement('section');
    card.className = 'card result';

    var h = document.createElement('h1');
    h.textContent = 'Uploaded';
    card.appendChild(h);

    var field = document.createElement('label');
    field.className = 'field';
    var span = document.createElement('span');
    span.textContent = 'Download link';
    var input = document.createElement('input');
    input.type = 'text';
    input.readOnly = true;
    input.value = r.url;
    field.appendChild(span);
    field.appendChild(input);
    card.appendChild(field);

    var copy = document.createElement('button');
    copy.type = 'button';
    copy.textContent = 'Copy link';
    copy.addEventListener('click', function () {
      input.select();
      var done = function () { copy.textContent = 'Copied'; };
      if (navigator.clipboard) navigator.clipboard.writeText(r.url).then(done, function () {});
      else { document.execCommand('copy'); done(); }
    });
    card.appendChild(copy);

    var dl = document.createElement('dl');
    addRow(dl, 'Expires', r.expires || 'never');
    addRow(dl, 'SHA-256', r.sha256, 'mono wrap');
    card.appendChild(dl);

    var warn = document.createElement('div');
    warn.className = 'warn';
    var wh = document.createElement('h2');
    wh.textContent = 'Delete token';
    var wp = document.createElement('p');
    wp.textContent = 'Shown once. Keep it if you want to remove the file early.';
    var wt = document.createElement('p');
    wt.className = 'mono wrap';
    wt.textContent = r.delete_token;
    warn.appendChild(wh);
    warn.appendChild(wp);
    warn.appendChild(wt);
    card.appendChild(warn);

    form.parentNode.insertBefore(card, form);
    form.hidden = true;
  }

  function addRow(dl, label, value, cls) {
    var dt = document.createElement('dt');
    dt.textContent = label;
    var dd = document.createElement('dd');
    dd.textContent = value;
    if (cls) dd.className = cls;
    dl.appendChild(dt);
    dl.appendChild(dd);
  }
})();