Skip to main content

UploadDropZone

Package​

@rpldy/upload-drop-zone

Installation​

npm install @rpldy/upload-drop-zone

OR

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

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

Props​

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
childrenReact.Nodeundefinedchild element(s) to render inside the container
extraPropsObjectundefinedany other props to pass to the div component (with spread)

dropHandler​

type DropResult = FileList | unknown[]

type DropHandlerMethod = (e: DragEvent) => 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.

htmlDirContentParams​

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

shouldRemoveDragOver​

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.

Example​

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

const App = () => (
<Uploady destination={destination}>
<UploadDropZone
onDragOverClassName="drag-over"
grouped
maxGroupSize={3}
>
<span>Drag&amp;Drop File(s) Here</span>
</UploadDropZone>
</Uploady>
);

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}>
<UploadDropZone
id="upload-drop-zone"
onDragOverClassName="drag-over"
shouldRemoveDragOver={({ target }) => target === indicatorRef.current}
>
<h1>Drop files here</h1>
<div className="on-drag-indicator" ref={indicatorRef} />
</UploadDropZone>
</Uploady>);
};