File Upload

1import { FileUpload } from '@/ui/Input'23<Field label="Attachments" description="Attached to the deployment record.">4  <FileUpload5    multiple6    accept="image/png,image/jpeg,application/pdf"7    maxSize={10 * 1024 * 1024}8    files={files}9    onFilesChange={setFiles}10  />11</Field>1213// Validate at selection. Both facts are known before a byte moves.14function validate(file: File) {15  if (file.size > MAX) return `Larger than the ${format(MAX)} limit`16  // accept= only filters the picker: drag-and-drop bypasses it entirely.17  if (!ACCEPTED.includes(file.type)) return 'Only PNG, JPG and PDF are accepted'18  return null19}2021// Per-file upload, so one failure does not restart the others.22async function upload(item: Upload) {23  const controller = new AbortController()24  setState(item.id, { state: 'uploading', controller })25  try {26    await put(item.file, {27      signal: controller.signal,28      onProgress: (p) => setState(item.id, { progress: p }),29    })30    setState(item.id, { state: 'done', progress: 100 })31  } catch (e) {32    if (e.name === 'AbortError') return33    setState(item.id, { state: 'error', error: 'Upload failed' })34  }35}3637// Object URLs leak until revoked. One per preview, released on unmount.38React.useEffect(() => {39  const url = URL.createObjectURL(file)40  setPreview(url)41  return () => URL.revokeObjectURL(url)42}, [file])

<!-- A label around a real input. Click, keyboard and the platform picker
     all work with zero JavaScript; drag-and-drop is the enhancement. -->
<label class="ds-dropzone">
  <input
    type="file"
    multiple
    accept="image/png,image/jpeg,application/pdf"
    class="sr-only"
    aria-describedby="upload-constraints"
  />
  <svg aria-hidden="true">…</svg>
  <span><strong>Choose files</strong> or drag them here</span>
  <span id="upload-constraints">PNG, JPG or PDF, up to 10 MB each</span>
</label>

<ul class="ds-filelist">
  <li aria-busy="true">
    <svg aria-hidden="true">…</svg>
    <span>architecture.png</span>
    <span>1.2 MB</span>
    <progress value="62" max="100">62%</progress>
    <button type="button" aria-label="Cancel architecture.png">…</button>
  </li>
</ul>

<p role="status" aria-live="polite">2 of 3 uploaded</p>
<p role="alert">trace.har rejected: larger than the 10 MB limit</p>

.ds-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  /* Dashed is the near-universal drop-target signal. A solid border reads
     as a container and people stop trying to drag onto it. */
  border: 2px dashed var(--ds-border);
  border-radius: var(--radius-lg);
  background: var(--ds-surface-inset);
  cursor: pointer;
  text-align: center;
}

/* The input is visually hidden, never display:none — that would remove it
   from the tab order and from the accessibility tree. */
.ds-dropzone input[type='file'] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

/* The ring belongs to the zone, since the input itself is invisible. */
.ds-dropzone:focus-within {
  border-color: var(--ds-accent);
  background: color-mix(in oklab, var(--ds-accent-subtle) 40%, transparent);
}

/* Two changes at once: a border shift alone is easy to miss with a file
   hovering under the cursor. */
.ds-dropzone[data-over='true'] {
  border-color: var(--ds-accent);
  background: var(--ds-accent-subtle);
}

.ds-filelist li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 48px;
  padding-inline: 12px;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--radius-md);
}
.ds-filelist li[data-state='error'] { border-color: var(--ds-danger-border); }

/* Truncate from the middle: the extension is what users check. */
.ds-filelist__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .ds-filelist li { min-block-size: 56px; }   /* 44px controls fit */
}