@oslokommune/punkt-react/src/components/fileupload/hooks/useRequiredFormValidation.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

import { RefObject, useEffect } from 'react'

/**
 * When `uploadStrategy="custom"` and the upload is marked `required`, the
 * native `required` attribute can't do the work (the input isn't posted).
 * This hook attaches a submit listener to the containing `<form>` that
 * prevents submission if the queue is empty, and surfaces a validation
 * error via `onMissingFiles`.
 *
 * Passive in `form` strategy — native validation handles that case.
 */
export const useRequiredFormValidation = (
  fileInputRef: RefObject<HTMLInputElement | null>,
  {
    uploadStrategy,
    required,
    currentFileCount,
    onMissingFiles,
  }: {
    uploadStrategy: 'form' | 'custom'
    required: boolean
    currentFileCount: number
    onMissingFiles: () => void
  },
) => {
  useEffect(() => {
    if (uploadStrategy !== 'custom' || !required) return
    const input = fileInputRef.current
    const form = input?.form
    if (!form) return

    const handleFormSubmit = (event: SubmitEvent) => {
      if (currentFileCount > 0) return
      event.preventDefault()
      onMissingFiles()
    }

    form.addEventListener('submit', handleFormSubmit)
    return () => {
      form.removeEventListener('submit', handleFormSubmit)
    }
  }, [fileInputRef, uploadStrategy, required, currentFileCount, onMissingFiles])
}