Datei auswählen, benennen, senden

<form id="bewerbung" action="/bewerbung"
  method="post" enctype="multipart/form-data">
  <label for="zeugnis">Zeugnis (PDF)</label>
  <input id="zeugnis" name="zeugnis" type="file"
    accept=".pdf,application/pdf" required
    aria-describedby="zeugnis-hinweis">
  <p id="zeugnis-hinweis">
    PDF, höchstens 10 MB.
  </p>

  <label for="fortschritt">
    Upload-Fortschritt: <span id="prozent">0 %</span>
  </label>
  <progress id="fortschritt" value="0" max="100">
    0 %
  </progress>
  <p id="upload-status" role="status"></p>
  <button type="submit">Zeugnis senden</button>
</form>

const form = document.querySelector('#bewerbung');
const field = document.querySelector('#zeugnis');
const bar = document.querySelector('#fortschritt');
const percent = document.querySelector('#prozent');
const status = document.querySelector('#upload-status');

form.addEventListener('submit', event => {
  event.preventDefault();
  const file = field.files[0];
  if (!file) return;
  if (file.size > 10 * 1024 * 1024) {
    field.setAttribute('aria-invalid', 'true');
    status.textContent = 'Datei zu groß. Wählen Sie bis 10 MB.';
    field.focus();
    return;
  }

  field.removeAttribute('aria-invalid');
  const request = new XMLHttpRequest();
  request.upload.addEventListener('progress', event => {
    if (!event.lengthComputable) return;
    const value = Math.round(event.loaded / event.total * 100);
    bar.value = value;
    percent.textContent = value + ' %';
  });
  request.addEventListener('load', () => {
    status.textContent = request.status >= 200 &&
      request.status < 300
      ? 'Zeugnis gesendet.'
      : 'Upload fehlgeschlagen. Versuchen Sie es erneut.';
  });
  request.addEventListener('error', () => {
    status.textContent = 'Netzwerkfehler. Versuchen Sie es erneut.';
  });
  request.open('POST', form.action);
  request.send(new FormData(form));
});