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
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)

dropHandler​

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.

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.

shouldHandleDrag​

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).

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>);
};