Art-gallery/client/src/components/DebugUploadButton.tsx

import { useRef, type ChangeEvent } from 'react';

interface Props {
  uploading: boolean;
  disabled?: boolean;
  onUploadPress?: () => void;
  onFileSelected: (file: File) => void | Promise<void>;
}

export default function DebugUploadButton({
  uploading,
  disabled = false,
  onUploadPress,
  onFileSelected,
}: Props) {
  const inputRef = useRef<HTMLInputElement>(null);
  const inactive = disabled || uploading;

  const handleChange = async (e: ChangeEvent<HTMLInputElement>) => {
    const input = e.currentTarget;
    const file = input.files?.[0];
    if (!file || inactive) return;

    try {
      await onFileSelected(file);
    } finally {
      input.value = '';
    }
  };

  return (
    <label
      className={`debug-upload-btn${inactive ? ' debug-upload-btn-disabled' : ''}`}
      aria-busy={uploading}
      onClick={() => {
        if (!inactive) onUploadPress?.();
      }}
    >
      {uploading ? (
        <span className="debug-upload-btn-loading">
          <span className="debug-upload-btn-spinner" aria-hidden />
          Uploading…
        </span>
      ) : (
        'Upload'
      )}
      <input
        ref={inputRef}
        className="debug-upload-input"
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif,image/avif,.jpg,.jpeg,.png,.webp,.gif,.avif"
        disabled={inactive}
        onChange={handleChange}
      />
    </label>
  );
}