File Upload

Live examples will be added when the component is implemented.

Single file — accessible pattern

<div class="op-form-field">
  <label for="upload-supporting-doc" class="op-label">
    Attach supporting document
  </label>

  <!-- Visually-hidden native input — triggered by the styled label/drop zone -->
  <input
    type="file"
    id="upload-supporting-doc"
    name="supporting-doc"
    accept=".pdf,.docx,.xlsx"
    class="sr-only"
    aria-describedby="upload-doc-helper"
  />

  <!-- Styled drop zone — wraps or references the input -->
  <div
    class="op-file-upload__drop-zone"
    role="button"
    tabindex="0"
    aria-label="Attach supporting document — drag and drop or press Enter to browse"
    aria-describedby="upload-doc-helper"
  >
    <wa-icon name="cloud-arrow-up" class="op-file-upload__icon"></wa-icon>
    <span class="op-file-upload__label">
      Drag and drop a file here, or
      <span class="op-file-upload__browse-link">browse</span>
    </span>
  </div>

  <p id="upload-doc-helper" class="op-helper-text">
    Accepted formats: PDF, DOCX, XLSX. Maximum 10 MB.
  </p>

  <!-- Screen reader live region for status announcements -->
  <div id="upload-doc-status" aria-live="polite" aria-atomic="false" class="sr-only"></div>
</div>

Multi-file — with file list and per-file error handling

<div class="op-form-field">
  <label for="upload-consultation-docs" class="op-label">
    Attach consultation documents
  </label>

  <input
    type="file"
    id="upload-consultation-docs"
    name="consultation-docs"
    accept=".pdf,.docx,image/*"
    multiple
    class="sr-only"
    aria-describedby="upload-consult-helper"
  />

  <div
    class="op-file-upload__drop-zone"
    role="button"
    tabindex="0"
    aria-describedby="upload-consult-helper"
  >
    <wa-icon name="cloud-arrow-up" class="op-file-upload__icon"></wa-icon>
    <span class="op-file-upload__label">
      Drag and drop files here, or
      <span class="op-file-upload__browse-link">browse</span>
    </span>
  </div>

  <p id="upload-consult-helper" class="op-helper-text">
    Accepted formats: PDF, DOCX, JPG, PNG. Maximum 10 MB per file.
  </p>

  <!-- File list rendered dynamically as files are selected -->
  <ul class="op-file-upload__file-list" aria-label="Selected files">

    <!-- Successfully uploaded file -->
    <li class="op-file-upload__file-item op-file-upload__file-item--success">
      <wa-icon name="file-pdf" class="op-file-upload__file-icon"></wa-icon>
      <span class="op-file-upload__file-name">site-assessment-report.pdf</span>
      <span class="op-file-upload__file-size">3.2 MB</span>
      <wa-icon
        name="circle-check"
        class="op-file-upload__status-icon"
        aria-label="Uploaded successfully"
      ></wa-icon>
      <button
        type="button"
        class="op-file-upload__remove-btn"
        aria-label="Remove site-assessment-report.pdf"
      >
        <wa-icon name="xmark"></wa-icon>
      </button>
    </li>

    <!-- File with validation error -->
    <li class="op-file-upload__file-item op-file-upload__file-item--error">
      <wa-icon name="file" class="op-file-upload__file-icon"></wa-icon>
      <div class="op-file-upload__file-info">
        <span class="op-file-upload__file-name">large-video.mp4</span>
        <p
          class="op-file-upload__file-error"
          role="alert"
          id="error-large-video"
        >
          File exceeds the 10 MB size limit. Please compress the file and try again.
        </p>
      </div>
      <span class="op-file-upload__file-size">82 MB</span>
      <button
        type="button"
        class="op-file-upload__remove-btn"
        aria-label="Remove large-video.mp4"
      >
        <wa-icon name="xmark"></wa-icon>
      </button>
    </li>

  </ul>

  <div id="upload-consult-status" aria-live="polite" aria-atomic="false" class="sr-only"></div>
</div>

CSS custom properties reference

.op-file-upload__drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--op-space-8);
  padding: var(--op-space-24) var(--op-space-32);
  border: 2px dashed var(--orbit-border);
  border-radius: var(--op-radius-md);
  background: var(--op-color-bg-primary);
  cursor: pointer;
  transition: border-color var(--op-transition-fast), background-color var(--op-transition-fast);
}

.op-file-upload__drop-zone:focus-visible {
  outline: 3px solid var(--op-color-interactive-focus);
  outline-offset: 2px;
}

.op-file-upload__drop-zone--drag-over {
  border-color: var(--op-color-interactive-default);
  background-color: color-mix(in srgb, var(--op-color-interactive-default) 8%, transparent);
}

.op-file-upload__browse-link {
  color: var(--op-color-interactive-default);
  text-decoration: underline;
}

.op-file-upload__file-list {
  list-style: none;
  padding: 0;
  margin-top: var(--op-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--op-space-8);
}

.op-file-upload__file-item {
  display: flex;
  align-items: center;
  gap: var(--op-space-12);
  padding: var(--op-space-12) var(--op-space-16);
  border: 1px solid var(--orbit-border);
  border-radius: var(--op-radius-md);
  min-height: 52px;
}

.op-file-upload__file-item--error {
  border-color: var(--op-color-status-error);
}

.op-file-upload__file-item--error .op-file-upload__file-name {
  color: var(--op-color-status-error);
}

.op-file-upload__file-error {
  font-size: var(--op-text-xs);
  color: var(--op-color-status-error);
  margin: var(--op-space-4) 0 0;
}

.op-file-upload__status-icon {
  color: var(--op-color-status-success);
  flex-shrink: 0;
}

.op-file-upload__remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--op-space-8);
  background: none;
  border: none;
  border-radius: var(--op-radius-sm);
  cursor: pointer;
  color: var(--op-color-text-secondary);
  flex-shrink: 0;
}

.op-file-upload__remove-btn:focus-visible {
  outline: 3px solid var(--op-color-interactive-focus);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .op-file-upload__drop-zone {
    transition: none;
  }
}

JavaScript — drag-and-drop wiring (vanilla)

const dropZone = document.querySelector('.op-file-upload__drop-zone');
const fileInput = document.getElementById('upload-consultation-docs');
const statusRegion = document.getElementById('upload-consult-status');

// Keyboard activation
dropZone.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    fileInput.click();
  }
});

// Click activation (when drop zone is not a <label>)
dropZone.addEventListener('click', () => fileInput.click());

// Drag events
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.classList.add('op-file-upload__drop-zone--drag-over');
});

['dragleave', 'dragend'].forEach((event) => {
  dropZone.addEventListener(event, () => {
    dropZone.classList.remove('op-file-upload__drop-zone--drag-over');
  });
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.classList.remove('op-file-upload__drop-zone--drag-over');
  handleFiles(e.dataTransfer.files);
});

fileInput.addEventListener('change', () => {
  handleFiles(fileInput.files);
  // Reset input so the same file can be re-selected after removal
  fileInput.value = '';
});

function handleFiles(files) {
  Array.from(files).forEach((file) => {
    if (file.size > 10 * 1024 * 1024) {
      announceStatus(`${file.name} could not be added. File exceeds the 10 MB size limit.`);
      renderFileError(file);
      return;
    }
    announceStatus(`${file.name} added, uploading.`);
    renderFileUploading(file);
    uploadFile(file);
  });
}

function announceStatus(message) {
  // Clear then set to ensure re-announcement for identical messages
  statusRegion.textContent = '';
  requestAnimationFrame(() => {
    statusRegion.textContent = message;
  });
}