Skip to main content

@rpldy/upload-drop-zone

Installation​

npm install @rpldy/upload-drop-zone

Details​

Drop zone (container) component to initiate file and folder content uploads Supports individual files as well as recursively iterating over a dropped directory to upload its contents.

Uses html-dir-content to process the files/directories in the dnd events (DataTransferItem).

Can easily be combined with other D&D solutions.

Drop Zones can use different configuration overrides that supersede the options passed to the parent Uploady.

note

Some options cannot be overriden by the button. For example, any prop that influences the file input directly (such as 'multiple')

Example​

Simple example, shows how upload options can be passed to the drop-zone (grouped, maxGroupSize).

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&Drop File(s) Here</span>
        </UploadDropZone>
    </Uploady>);

Exports​

Related Topics​