Dropzone

A drag-and-drop target. Unstyled: wrap whatever you already render and read data-dragging for the hover state.

import { Dropzone } from "uplofile";

Usage

import { Dropzone, Preview, Root, Trigger } from "uplofile";

const upload = async (file: File) => ({ url: URL.createObjectURL(file) });

export function Uploader() {
  return (
    <Root upload={upload}>
      {/* data-dragging="true" while a file hovers over the zone. */}
      <Dropzone className="rounded-lg border border-dashed p-8 data-[dragging=true]:border-accent">
        Drop files here, or <Trigger>browse</Trigger>
        <Preview />
      </Dropzone>
    </Root>
  );
}

Props

classNamestring

A plain <div> by default. Style data-dragging for hover feedback: Dropzone tracks enter/leave counts so it stays accurate over nested children.

—

asChildboolean

Merge dropzone behavior onto your own element instead of rendering a div.

false

...restHTMLAttributes<HTMLElement>

Any other div attribute. onDrop and onDragOver you pass are called first, then Uplofile's own handlers run unless you call preventDefault().

—

PreviousPreview NextHiddenInput