Upload zone

"use client";
import styles from "./UploadZone.module.css";
import { useState, useRef, useId } from "react";
export function validateFile(file, maxBytes) {
  if (!file) return "";
  if (
    !["image/png", "image/jpeg", "image/webp", "image/svg+xml"].includes(
      file.type,
    )
  )
    return "Choose a PNG, JPEG, WebP, or SVG image.";
  if (file.size > maxBytes)
    return "This file is too large. Choose a smaller image.";
  return "";
}
export default function UploadZone({ onFile, maxBytes = 5 * 1024 * 1024 }) {
  const [dragging, setDragging] = useState(false);
  const [message, setMessage] = useState(
    `PNG, JPEG, WebP or SVG · up to ${Math.round((maxBytes / 1024 / 1024) * 10) / 10} MB`,
  );
  const input = useRef(null);
  const id = useId();
  function accept(file) {
    setDragging(false);
    if (!file) return;
    const error = validateFile(file, maxBytes);
    if (error) {
      setMessage(error);
      return;
    }
    setMessage(`${file.name} selected. Nothing has been uploaded.`);
    onFile?.(file);
  }
  return (
    <div
      className={styles.root}
      data-dragging={dragging}
      onDragOver={(event) => {
        event.preventDefault();
        setDragging(true);
      }}
      onDragLeave={(event) => {
        if (!event.currentTarget.contains(event.relatedTarget))
          setDragging(false);
      }}
      onDrop={(event) => {
        event.preventDefault();
        accept(event.dataTransfer.files[0]);
      }}
    >
      <div className={styles.files} aria-hidden="true">
        <i />
        <i />
        <span>↑</span>
      </div>
      <strong>Drop your next idea here.</strong>
      <button
        type="button"
        aria-describedby={id}
        onClick={() => input.current?.click()}
      >
        Choose an image
      </button>
      <input
        ref={input}
        type="file"
        accept="image/png,image/jpeg,image/webp,image/svg+xml"
        className={styles.hidden}
        tabIndex={-1}
        onChange={(event) => {
          accept(event.target.files[0]);
          event.target.value = "";
        }}
      />
      <p id={id} role="status">
        {message}
      </p>
    </div>
  );
}