Function useFileDragging

Custom React hook for handling drag-and-drop file uploads.

Example

// Using the hook in a React component
import { useRef } from "react";
import { useFileDragging } from "./useFileDragging";

function FileCard() {
  const fileInputRef = useRef(null);
  const { onDragOver, onDragLeave, onDrop, isDragging } = useFileDragging(fileInputRef);

  return (
    <div
      onDragOver={onDragOver}
      onDragLeave={onDragLeave}
      onDrop={onDrop}
      style={{ border: isDragging ? "2px dashed blue" : "2px solid grey" }}
    >
      Drag and drop your files here
      <input ref={fileInputRef} type="file" hidden />
    </div>
  );
}
  • useFileDragging(
        fileInputRef: MutableRefObject<any>,
    ): {
        isDragging: boolean;
        onDragLeave: (event: DragEvent) => void;
        onDragOver: (event: DragEvent) => void;
        onDrop: (event: DragEvent) => void;
    }

    Parameters

    • fileInputRef: MutableRefObject<any>

      Reference to the file input element where files will be added.

    Returns {
        isDragging: boolean;
        onDragLeave: (event: DragEvent) => void;
        onDragOver: (event: DragEvent) => void;
        onDrop: (event: DragEvent) => void;
    }

    Handlers and drag state.

    • isDragging: boolean
    • onDragLeave: (event: DragEvent) => void
    • onDragOver: (event: DragEvent) => void
    • onDrop: (event: DragEvent) => void

Settings

Member Visibility