JavaScript file upload form

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Send us a file</title>
    <style>
      *, *::before, *::after { box-sizing: border-box; }
      body {
        margin: 0;
        padding: 32px 16px;
        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        background: #f4f4f5;
        color: #18181b;
      }
      .card {
        max-width: 460px;
        margin: 0 auto;
        padding: 28px;
        background: #fff;
        border: 1px solid #e4e4e7;
        border-radius: 12px;
      }
      h1 { margin: 0 0 6px; font-size: 20px; }
      .sub { margin: 0 0 22px; font-size: 14px; color: #71717a; }
      .field { margin-bottom: 16px; }
      label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
      input, textarea, select {
        width: 100%;
        padding: 10px 12px;
        font: inherit;
        font-size: 14px;
        color: #18181b;
        background: #fff;
        border: 1px solid #d4d4d8;
        border-radius: 8px;
      }
      input:focus, textarea:focus, select:focus {
        outline: 2px solid #18181b;
        outline-offset: 1px;
        border-color: transparent;
      }
      textarea { min-height: 110px; resize: vertical; }
      button {
        width: 100%;
        padding: 11px 16px;
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        background: #18181b;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
      }
      button:hover { background: #3f3f46; }
      button:active { transform: scale(0.99); }
      button[disabled] { opacity: 0.6; cursor: default; }
      /* Hidden from people, filled in by bots. Never remove it. */
      .hp { display: none; }
      .drop {
        display: grid;
        place-items: center;
        padding: 28px 16px;
        margin-bottom: 12px;
        font-size: 13px;
        color: #71717a;
        text-align: center;
        border: 1px dashed #d4d4d8;
        border-radius: 10px;
        cursor: pointer;
        transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms;
      }
      .drop:hover, .drop.over { border-color: #18181b; background: #fafafa; }
      .error { margin: 0 0 12px; font-size: 12px; color: #b91c1c; }
      .progress { height: 3px; margin-bottom: 12px; background: #e4e4e7; border-radius: 999px; overflow: hidden; }
      .progress span { display: block; width: 0; height: 100%; background: #18181b; transition: width 120ms linear; }
    </style>
  </head>
  <body>
    <form id="form" class="card" action="https://app.portform.co/api/submit" method="POST" enctype="multipart/form-data">
      <h1>Send us a file</h1>
      <p class="sub">Drop it below, or choose one. Up to 5&nbsp;MB.</p>

      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="checkbox" name="botcheck" class="hp" tabindex="-1" autocomplete="off" />

      <div class="field">
        <label for="email">Email</label>
        <input id="email" type="email" name="email" autocomplete="email" required />
      </div>

      <label id="drop" class="drop" for="attachment">
        <input id="attachment" type="file" name="attachment" accept=".pdf,.png,.jpg,.jpeg" required hidden />
        <span id="dropLabel">Drop a file here, or click to choose</span>
      </label>
      <p id="error" class="error"></p>

      <div class="progress" id="progress" hidden><span id="fill"></span></div>

      <button type="submit">Send</button>
    </form>

    <script>
      const MAX_BYTES = 5 * 1024 * 1024

      const form = document.getElementById('form')
      const input = document.getElementById('attachment')
      const drop = document.getElementById('drop')
      const label = document.getElementById('dropLabel')
      const error = document.getElementById('error')
      const progress = document.getElementById('progress')
      const fill = document.getElementById('fill')

      function accept(file) {
        if (!file) return
        if (file.size > MAX_BYTES) {
          error.textContent = 'That file is over 5 MB.'
          input.value = ''
          return
        }
        error.textContent = ''
        label.textContent = `${file.name} · ${(file.size / 1024 / 1024).toFixed(1)} MB`
      }

      input.addEventListener('change', () => accept(input.files[0]))

      drop.addEventListener('dragover', (event) => {
        event.preventDefault()
        drop.classList.add('over')
      })
      drop.addEventListener('dragleave', () => drop.classList.remove('over'))
      drop.addEventListener('drop', (event) => {
        event.preventDefault()
        drop.classList.remove('over')
        input.files = event.dataTransfer.files
        accept(input.files[0])
      })

      // XHR, not fetch: fetch still cannot report upload progress.
      form.addEventListener('submit', (event) => {
        event.preventDefault()
        const xhr = new XMLHttpRequest()
        progress.hidden = false

        xhr.upload.addEventListener('progress', (e) => {
          if (e.lengthComputable) fill.style.width = `${(e.loaded / e.total) * 100}%`
        })
        xhr.addEventListener('load', () => {
          form.innerHTML = '<h1>Thanks</h1><p class="sub">Your file is with us.</p>'
        })
        xhr.addEventListener('error', () => {
          error.textContent = 'Upload failed. Please try again.'
          progress.hidden = true
        })

        xhr.open('POST', form.action)
        xhr.send(new FormData(form))
      })
    </script>
  </body>
</html>