Skip to main content





npm install @rpldy/upload-drop-zone


npm install @rpldy/uploady @rpldy/upload-drop-zone

Must be rendered inside (child/descendant) of an Uploady instance


Name (* = mandatory)TypeDefaultDescription
idstringundefinedid attribute to pass to the container element
classNamestringundefinedthe class attribute to pass to the container element
onDragOverClassNamestringundefinedclass name to add to the container when dragged over
dropHandlerDropHandlerMethodundefinedoverride default handler that returns the drop result (ex: files). May return a promise
htmlDirContentParamsObjectundefinedwill be passed as is to html-dir-content.
shouldRemoveDragOverShouldRemoveDragOverMethodundefinedcallback to help identify when to remove the onDragOverClassName. Receives the dragleave event
shouldHandleDragboolean or ShouldHandleDragMethodundefinedWhether drag&drop should be handled, either boolean or method returning boolean
enableOnContainsbooleantrueBy default will handle drag-enter for children of the container and not just the container itself
childrenReact.Nodeundefinedchild element(s) to render inside the container
extraPropsObjectundefinedany other props to pass to the div component (with spread)


type DropResult = FileList | unknown[]

type GetFilesMethod = () => Promise<File[]>;

type DropHandlerMethod = (e: DragEvent, getFiles: GetFilesMethod) => DropResult | Promise<DropResult>;

By default, handles Drop event by calling getFilesFromDragEvent from html-dir-content.

In case you want to provide your own logic that will calculate the items(files) passed to the uploader from the drop event, pass in a custom handler.

You can still get the files as the internal method does, by calling getFiles passed to the custom dropHandler as the second param. getFiles returns a promise resolving to files (if any) found in the drag event (dataTransfer) property.


These are options that html-dir-content receives as is. See docs for more info.


type ShouldRemoveDragOverMethod = (e: DragEvent) => boolean;

There are cases when the default logic in the UploadDropZone component cannot determine whether the drag leave event should remove the indicator (onDragOverClassName).

In this case, this prop can be implemented. It will receive the dragleave event. Custom logic can be added to determine whether this event should be considered as the cause to remove the indicator.

See the example below on how to implement.


export type ShouldHandleDragMethod = (e: DragEvent) => boolean;

export type ShouldHandleDrag = boolean | ShouldHandleDragMethod;

Can be a boolean or a method returning a boolean. In case of a method, the drag event will be provided as a param.

In case shouldHandleDrag === false, the drag&drop flow will not be handled by this component. In case you want to use logic to determine whether drag&drop will be enabled, pass a callback for this prop. Returning a Falsy value will disable DnD, returning Truthy will keep it enabled (as would undefined by default).


import Uploady from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";

const App = () => (
<Uploady destination={destination}>
<span>Drag&amp;Drop File(s) Here</span>

Custom Remove Drag Class​

import Uploady from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";

const App = () => {
const indicatorRef = useRef(null);

return (<Uploady destination={destination}>
shouldRemoveDragOver={({ target }) => target === indicatorRef.current}
<h1>Drop files here</h1>
<div className="on-drag-indicator" ref={indicatorRef} />