Aki UI

Dropzone

ドロップゾーン

A drop target that also opens the file picker on click, with validation for type, count and size. Built with react-dropzone↗↗ and Tailwind CSS.

Installation

Install the following dependencies:1

npm install react-dropzonenpm install lucide-react

Copy and paste the following code into a new component file:2

"use client"

import { UploadIcon } from "lucide-react"

import { createContext, useContext, type ReactNode } from "react"

import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone"

import { useDropzone } from "react-dropzone"

import { cn } from "@/lib/utils"

type DropzoneContextType = {

src?: File[],

How to use it3

"use client"

import { Dropzone, DropzoneContent, DropzoneEmptyState } from "@/components/ui/dropzone"

import { useState } from "react"

export default function Page() {

const [files, setFiles] = useState<File[] | undefined>()

return (

Props

Dropzone

Name	Default	Description
src	—	File[] Files currently held, drives which of the two states is shown
onDrop	—	(accepted: File[], rejections: FileRejection[], event: DropEvent) => void Called with the accepted files once every file passes validation
onError	—	(error: Error) => void Called with the first rejection message when validation fails
accept	—	Record<string, string[]> Allowed MIME types, for example { "image/*": [] }
maxFiles	1	number How many files can be dropped at once
maxSize	—	number Largest accepted file in bytes
minSize	—	number Smallest accepted file in bytes
disabled	false	boolean Blocks dropping and clicking
children	—	ReactNode Usually DropzoneEmptyState and DropzoneContent
className	—	string Additional classes on the drop target

DropzoneEmptyState

Name	Default	Description
children	—	ReactNode Replaces the default prompt, rendered only while src is empty
className	—	string Additional classes on the default prompt

Name

Default

Description

children

—

ReactNode

Replaces the default prompt, rendered only while src is empty

className

—

string

Additional classes on the default prompt

DropzoneContent

Name	Default	Description
children	—	ReactNode Replaces the default file summary, rendered only once src is set
className	—	string Additional classes on the default file summary