File Upload

<!-- File Upload: Dropzone -->
<div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="Upload files. Accepted: JPG, PNG, PDF. Max 10 MB each.">
  <input
    type="file"
    id="file-input"
    accept=".jpg,.jpeg,.png,.pdf"
    multiple
    hidden
    aria-hidden="true"
  />

  <div class="dropzone__content">
    <svg class="dropzone__icon" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true">
      <path d="M20 6v20M12 14l8-8 8 8" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M6 28v4a2 2 0 002 2h24a2 2 0 002-2v-4" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
    <p class="dropzone__text">
      <strong>Drag & drop files</strong> or <button type="button" class="dropzone__browse" onclick="document.getElementById('file-input').click()">browse</button>
    </p>
    <p class="dropzone__hint">JPG, PNG, PDF — max 10 MB each</p>
  </div>
</div>

<ul id="file-list" class="file-list" aria-label="Uploaded files"></ul>
<div id="upload-status" aria-live="polite" class="sr-only"></div>

<style>
.dropzone {
  border: 2px dashed var(--color-neutral-300);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-neutral-50);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
  outline: none;
}

.dropzone:hover {
  border-color: var(--color-neutral-400);
  background: var(--color-neutral-100);
}

.dropzone:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.dropzone.drag-over {
  border-color: var(--color-primary-500);
  border-style: solid;
  background: var(--color-primary-50);
}

.dropzone.drag-invalid {
  border-color: var(--color-error-500);
  border-style: solid;
  background: var(--color-error-50);
}

.dropzone__icon {
  color: var(--color-neutral-400);
  margin-bottom: 0.75rem;
  transition: color 150ms ease, transform 150ms ease;
}

.dropzone.drag-over .dropzone__icon {
  color: var(--color-primary-500);
  transform: scale(1.1);
}

.dropzone__text {
  font-size: 0.875rem;
  color: var(--color-neutral-700);
  margin: 0;
}

.dropzone__browse {
  background: none;
  border: none;
  color: var(--color-primary-600);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}

.dropzone__hint {
  font-size: 0.75rem;
  color: var(--color-neutral-400);
  margin: 0.25rem 0 0;
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md, 8px);
  font-size: 0.8125rem;
}

.file-item__progress {
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: 2px;
  flex: 1;
  overflow: hidden;
}

.file-item__progress-fill {
  height: 100%;
  background: var(--color-primary-600);
  transition: width 200ms ease;
}

.file-item__remove {
  background: none;
  border: none;
  color: var(--color-neutral-400);
  cursor: pointer;
  padding: 0.25rem;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

<script>
const dropzone = document.getElementById("dropzone");
const fileInput = document.getElementById("file-input");
const fileList = document.getElementById("file-list");
const statusRegion = document.getElementById("upload-status");
const MAX_SIZE = 10 * 1024 * 1024; // 10 MB

dropzone.addEventListener("click", () => fileInput.click());
dropzone.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    fileInput.click();
  }
});

dropzone.addEventListener("dragover", (e) => {
  e.preventDefault();
  dropzone.classList.add("drag-over");
});

dropzone.addEventListener("dragleave", () => {
  dropzone.classList.remove("drag-over", "drag-invalid");
});

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  dropzone.classList.remove("drag-over", "drag-invalid");
  handleFiles(e.dataTransfer.files);
});

fileInput.addEventListener("change", () => {
  handleFiles(fileInput.files);
  fileInput.value = "";
});

function handleFiles(files) {
  let added = 0;
  [...files].forEach((file) => {
    if (file.size > MAX_SIZE) {
      statusRegion.textContent = file.name + " rejected: exceeds 10 MB limit.";
      return;
    }
    addFileItem(file);
    added++;
  });
  if (added > 0) {
    statusRegion.textContent = added + " file(s) added.";
  }
}

function addFileItem(file) {
  const li = document.createElement("li");
  li.className = "file-item";
  const sizeStr = (file.size / 1024 / 1024).toFixed(1) + " MB";
  li.innerHTML =
    '<span class="file-item__name">' + file.name + ' (' + sizeStr + ')</span>' +
    '<button class="file-item__remove" aria-label="Remove ' + file.name + '">✕</button>';
  li.querySelector(".file-item__remove").addEventListener("click", () => {
    li.remove();
    statusRegion.textContent = file.name + " removed.";
  });
  fileList.appendChild(li);
}
</script>

import React, { useState, useRef, useCallback, useId } from "react";

interface UploadedFile {
  file: File;
  id: string;
  progress: number;
  status: "pending" | "uploading" | "complete" | "error";
  error?: string;
}

interface FileUploadProps {
  accept?: string;
  multiple?: boolean;
  maxSize?: number;
  maxFiles?: number;
  disabled?: boolean;
  label?: string;
  hint?: string;
  onFilesAdded?: (files: File[]) => void;
  onFileRemoved?: (file: File) => void;
}

export function FileUpload({
  accept,
  multiple = false,
  maxSize = 10 * 1024 * 1024,
  maxFiles,
  disabled = false,
  label = "Upload files",
  hint,
  onFilesAdded,
  onFileRemoved,
}: FileUploadProps) {
  const id = useId();
  const inputRef = useRef<HTMLInputElement>(null);
  const [files, setFiles] = useState<UploadedFile[]>([]);
  const [isDragOver, setIsDragOver] = useState(false);
  const [announcement, setAnnouncement] = useState("");

  const formatSize = (bytes: number) =>
    bytes < 1024 * 1024
      ? (bytes / 1024).toFixed(0) + " KB"
      : (bytes / 1024 / 1024).toFixed(1) + " MB";

  const validate = useCallback(
    (file: File): string | null => {
      if (maxSize && file.size > maxSize) return `File exceeds ${formatSize(maxSize)} limit`;
      if (accept) {
        const types = accept.split(",").map((t) => t.trim());
        const ext = "." + file.name.split(".").pop()?.toLowerCase();
        const matches = types.some(
          (t) =>
            t === ext ||
            t === file.type ||
            (t.endsWith("/*") && file.type.startsWith(t.replace("/*", "/")))
        );
        if (!matches) return "File type not accepted";
      }
      return null;
    },
    [accept, maxSize]
  );

  const addFiles = useCallback(
    (incoming: FileList | File[]) => {
      const arr = Array.from(incoming);
      const accepted: File[] = [];
      const rejected: string[] = [];

      arr.forEach((f) => {
        const err = validate(f);
        if (err) {
          rejected.push(`${f.name}: ${err}`);
        } else if (maxFiles && files.length + accepted.length >= maxFiles) {
          rejected.push(`${f.name}: max ${maxFiles} files reached`);
        } else {
          accepted.push(f);
        }
      });

      const newFiles = accepted.map((f) => ({
        file: f,
        id: crypto.randomUUID(),
        progress: 0,
        status: "pending" as const,
      }));

      setFiles((prev) => [...prev, ...newFiles]);
      onFilesAdded?.(accepted);

      const msgs: string[] = [];
      if (accepted.length) msgs.push(`${accepted.length} file(s) added`);
      if (rejected.length) msgs.push(`Rejected: ${rejected.join("; ")}`);
      setAnnouncement(msgs.join(". "));
    },
    [files.length, maxFiles, validate, onFilesAdded]
  );

  const removeFile = (uploadedFile: UploadedFile) => {
    setFiles((prev) => prev.filter((f) => f.id !== uploadedFile.id));
    onFileRemoved?.(uploadedFile.file);
    setAnnouncement(`${uploadedFile.file.name} removed`);
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    if (!disabled) setIsDragOver(true);
  };

  const handleDragLeave = () => setIsDragOver(false);

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragOver(false);
    if (!disabled) addFiles(e.dataTransfer.files);
  };

  const handleClick = () => {
    if (!disabled) inputRef.current?.click();
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if ((e.key === "Enter" || e.key === " ") && !disabled) {
      e.preventDefault();
      inputRef.current?.click();
    }
  };

  return (
    <div>
      <div
        role="button"
        tabIndex={disabled ? -1 : 0}
        aria-label={label}
        aria-describedby={hint ? `${id}-hint` : undefined}
        aria-disabled={disabled}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        style={{
          border: `2px ${isDragOver ? "solid" : "dashed"} ${isDragOver ? "var(--color-primary-500)" : "var(--color-neutral-300)"}`,
          borderRadius: "var(--radius-lg, 12px)",
          background: isDragOver ? "var(--color-primary-50)" : "var(--color-neutral-50)",
          padding: "2rem",
          textAlign: "center",
          cursor: disabled ? "not-allowed" : "pointer",
          opacity: disabled ? 0.5 : 1,
          transition: "border-color 150ms ease, background-color 150ms ease",
          outline: "none",
        }}
      >
        <input
          ref={inputRef}
          type="file"
          accept={accept}
          multiple={multiple}
          hidden
          aria-hidden="true"
          onChange={(e) => {
            if (e.target.files) addFiles(e.target.files);
            e.target.value = "";
          }}
        />
        <p style={{ margin: 0, fontSize: "0.875rem", color: "var(--color-neutral-700)" }}>
          <strong>Drag & drop files</strong> or click to browse
        </p>
        {hint && (
          <p id={`${id}-hint`} style={{ margin: "0.25rem 0 0", fontSize: "0.75rem", color: "var(--color-neutral-400)" }}>
            {hint}
          </p>
        )}
      </div>

      {files.length > 0 && (
        <ul style={{ listStyle: "none", padding: 0, margin: "0.75rem 0 0", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
          {files.map((f) => (
            <li
              key={f.id}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "0.5rem 0.75rem",
                background: "var(--color-white)",
                border: "1px solid var(--color-neutral-200)",
                borderRadius: "var(--radius-md, 8px)",
                fontSize: "0.8125rem",
              }}
            >
              <span>{f.file.name} ({formatSize(f.file.size)})</span>
              <button
                type="button"
                aria-label={`Remove ${f.file.name}`}
                onClick={() => removeFile(f)}
                style={{
                  background: "none",
                  border: "none",
                  cursor: "pointer",
                  color: "var(--color-neutral-400)",
                  minWidth: 24,
                  minHeight: 24,
                }}
              >
                ✕
              </button>
            </li>
          ))}
        </ul>
      )}

      <div aria-live="polite" aria-atomic="true" style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)" }}>
        {announcement}
      </div>
    </div>
  );
}