Function DropzoneComponent

components/Dropzone.tsx:11–305

({
  onFilesAdded,
  isProcessing,
  compact,
}: DropzoneProps)

}

const DropzoneComponent = ({
  onFilesAdded,
  isProcessing,
  compact,
}: DropzoneProps) => {
  const [isDragOver, setIsDragOver] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const dragCounter = useRef(0);

  const isValidFile = (file: File) => {
    return (
      file.type.startsWith('image/') ||
      file.type === 'application/zip' ||
      file.type === 'application/x-zip-compressed' ||
      file.name.endsWith('.zip') ||
      file.name.endsWith('.svg')
    );
  };

  useEffect(() => {
    const handleWindowDragEnter = (e: DragEvent) => {
      e.preventDefault();
      dragCounter.current += 1;
      if (
        e.dataTransfer?.types &&
        Array.from(e.dataTransfer.types).includes('Files')
      ) {
        setIsDragOver(true);
      }
    };

    const handleWindowDragLeave = (e: DragEvent) => {
      e.preventDefault();
      dragCounter.current -= 1;
      if (dragCounter.current === 0) {
        setIsDragOver(false);
      }
    };

    const handleWindowDragOver = (e: DragEvent) => {
      e.preventDefault();
    };

    const handleWindowDrop = async (e: DragEvent) => {
      e.preventDefault();
      dragCounter.current = 0;
      setIsDragOver(false);

      if (e.dataTransfer?.items) {
        const files: File[] = [];
        const MAX_FILES = 100;
        let processedCount = 0;

        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const traverseFileTree = async (item: any, path?: string) => {
          if (processedCount >= MAX_FILES) return;
          path = path || '';