Chalk UI
Getting started
Customization
Dark Mode
CLI
Components
Accordion
Address Input
Alert
App Layout
Autocomplete
Avatar
Badge
Breadcrumbs
Button
Calendar
Card
Carousel
Chart (Area)
Chart (Bar)
Chart (Donut)
Chart (Line)
Checkbox
Checkbox Group
Collapsible
Combobox
Command
Currency Input
DataGrid
Date Picker
Date Range Picker
Disclosure
Drawer
Dropdown Menu
Form
Horizontal Draggable Scroll
Hover Card
Loading Spinner
Loading Overlay
Modal
Native Select
Navigation Menu
Number Input
Page Header
Pagination
Phone Input
Popover
Progress Bar
Radio Group
Scroll Area
Select
Separator
Simple Dropzone
Skeleton
Static Tabs
Stats
Switch
Table
Tabs
Text Input
Textarea
Timeline
Toaster
Tooltip
Vertical Menu

Simple Dropzone

A wrapper around a file input.

SourceDependency API

Installation

npx @rahimstack@latest add simple-dropzone

Usage

Accept

Checkout the docs for more information on types option.

Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. - React Dropzone

API Reference

const SimpleDropzoneAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-SimpleDropzone__root",
        "appearance-none w-full mb-2 cursor-pointer hover:text-[--text-color] flex items-center justify-center p-4 border rounded-[--radius] border-dashed",
        "gap-3 text-sm sm:text-base",
        "outline-none ring-[--ring] focus-visible:ring-2",
        "text-[--muted] transition ease-in-out hover:border-[--foreground]",
        "data-[drag-active=true]:border-brand-500",
        "data-[drag-reject=true]:border-[--red]",
    ]),
    list: cva([
        "UI-SimpleDropzone__list",
        "flex rounded-md flex-wrap divide-y divide-[--border]",
    ]),
    listItem: cva([
        "UI-SimpleDropzone__listItem",
        "flex items-center justify-space-between relative p-1 hover:bg-[--subtle] w-full overflow-hidden",
    ]),
    listItemDetailsContainer: cva([
        "UI-SimpleDropzone__listItemDetailsContainer",
        "flex items-center gap-2 truncate w-full",
    ]),
    listItemTitle: cva([
        "UI-SimpleDropzone__listItemTitle",
        "truncate max-w-[180px] text-[.9rem]",
    ]),
    listItemSize: cva([
        "UI-SimpleDropzone__listItemSize",
        "text-xs uppercase text-center font-semibold align-center text-[--muted]",
    ]),
    listItemRemoveButton: cva([
        "UI-SimpleDropzone__listItemRemoveButton",
        "ml-2 rounded-full",
    ]),
    imagePreviewGrid: cva([
        "UI-SimpleDropzone__imagePreviewGrid",
        "flex gap-2 flex-wrap place-content-center pt-4",
    ]),
    imagePreviewContainer: cva([
        "UI-SimpleDropzone__imagePreviewContainer",
        "col-span-1 row-span-1 aspect-square w-36 h-auto",
    ]),
    imagePreview: cva([
        "UI-SimpleDropzone__imagePreview",
        "relative bg-transparent border h-full bg-center bg-no-repeat bg-contain rounded-md overflow-hidden",
        "col-span-1 row-span-1",
    ]),
    imagePreviewRemoveButton: cva([
        "UI-SimpleDropzone__imagePreviewRemoveButton",
        "absolute top-1 right-1",
    ]),
    fileIcon: cva([
        "UI-SimpleDropzone__fileIcon",
        "w-5 h-5 flex-none",
    ]),
    maxSizeText: cva([
        "UI-SimpleDropzone__maxSizeText",
        "text-sm text-[--muted] font-medium",
    ]),
})