useFileDrop

The useFileDrop hook listens for file drops onto the canvas and provides drag-over state for visual feedback.

Import

import { useFileDrop } from "@gridland/web"

Usage

Basic

function FileDropZone() {
  const { isDragOver } = useFileDrop((file) => {
    console.log(`Dropped: ${file.name} (${file.size} bytes)`)
    console.log(file.content)
  })

  return (
    <box border borderColor={isDragOver ? "green" : "gray"}>
      <text>{isDragOver ? "Drop here!" : "Drag a file here"}</text>
    </box>
  )
}

Examples

File Type Filtering

Check the MIME type before processing.

Accept only JSON

function JsonDropZone() {
  const [data, setData] = useState<string | null>(null)

  const { isDragOver } = useFileDrop((file) => {
    if (file.type === "application/json") {
      setData(file.content)
    }
  })

  return (
    <box border borderColor={isDragOver ? "cyan" : "gray"}>
      <text>{isDragOver ? "Drop JSON file..." : data ?? "Drop a .json file here"}</text>
    </box>
  )
}

Show File Info

Display metadata about the dropped file.

File info

function FileInfo() {
  const [file, setFile] = useState<DroppedFile | null>(null)

  const { isDragOver } = useFileDrop((dropped) => {
    setFile(dropped)
  })

  return (
    <box border borderColor={isDragOver ? "green" : "gray"} padding={1}>
      {file ? (
        <>
          <text>Name: {file.name}</text>
          <text>Type: {file.type}</text>
          <text>Size: {file.size} bytes</text>
        </>
      ) : (
        <text>{isDragOver ? "Release to drop" : "Drag a file here"}</text>
      )}
    </box>
  )
}

Parameters

Param	Type	Description
`callback`	`(file: DroppedFile) => void`	Called when a file is dropped

Returns

Property	Type	Description
`isDragOver`	`boolean`	`true` while a file is being dragged over the canvas

DroppedFile

Property	Type	Description
`name`	`string`	File name
`content`	`string`	File content as a string
`type`	`string`	MIME type
`size`	`number`	File size in bytes