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",
    ]),
})