File Upload

Renders a drag-and-drop file upload interface with visual feedback. It handles file selection and supports single or multiple files. Use it to let users upload files through drag-and-drop or a custom trigger. The interface shows a overlay when files are being dragged.

byJulien Thibeaut from Prompt Kit

Installation

terminal

pnpm dlx layro-cli add @ibelick/file-upload

npx layro-cli add @ibelick/file-upload

npx layro-cli add @ibelick/file-upload

bunx layro-cli add @ibelick/file-upload

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { cn } from "@/lib/utils"
import {
  Children,
  cloneElement,
  createContext,
  useCallback,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react"
import { createPortal } from "react-dom"