Back to Primitives

DropZone

1:1Forms
View on GitHub

File upload drop zone.

Example
Drop an image here or click to upload
Usage
import { DropZone } from '@/components/polaris';

function Example() {
    return (
        <DropZone accept="image/*" onDrop={(files) => console.log(files)}>
            Drop an image here or click to upload
        </DropZone>
    );
}
Component Source
import { forwardRef, createElement } from 'react';

type Props = JSX.IntrinsicElements['s-drop-zone'];

/**
 * DropZone component - file upload via drag and drop or click.
 *
 * @example
 * <DropZone accept="image/*">Drop images here</DropZone>
 */
export const DropZone = forwardRef<HTMLElement, Props>((props, ref) => createElement('s-drop-zone', { ref, ...props }));

DropZone.displayName = 'DropZone';