In this example it was created whit React and typescript
- Drag and drop area
<div
onDrop={handleDrop}
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
>
</div>
- Actions
const handleDragOver = ( e: DragEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragEnter = ( e: DragEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragLeave = ( e: DragEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
};
const handleDrop = ( e: DragEvent<any>) => {
e.preventDefault();
e.stopPropagation();
// the 'files' constant contains the documents
const files = e.dataTransfer.files;
};
Top comments (0)