@progress/kendo-react-upload/UploadDropZone.js

React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react"),d=require("@progress/kendo-react-common"),m=require("@progress/kendo-react-intl"),s=require("./messages/index.js"),f=require("./utils/utils.js"),_=require("./UploadStatus.js");function A(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const r=A(D),i=100;class u extends r.Component{constructor(){super(...arguments),this._lastDocumentDragOver=null,this._lastElementDragOver=null,this._documentActive=!1,this._elementActive=!1,this.onDocumentDragEnter=()=>{if(!this.documentActive){this.documentActive=!0;const e=()=>{this.isDragOver(this._lastDocumentDragOver)&&(this.documentActive=!1,clearInterval(this._documentInterval),this._documentInterval=null,this._lastDocumentDragOver=null)};this._documentInterval=setInterval(e,i)}},this.onDocumentDragOver=()=>{this._lastDocumentDragOver=new Date},this.onElementDragEnter=()=>{if(!this.elementActive){this.elementActive=!0;const e=()=>{this.isDragOver(this._lastElementDragOver)&&(this.elementActive=!1,clearInterval(this._elementInterval),this._elementInterval=null,this._lastElementDragOver=null)};this._elementInterval=setInterval(e,i)}},this.onElementDragOver=e=>{e.preventDefault(),this._lastElementDragOver=new Date},this.onDrop=e=>{e.preventDefault();const t=e.dataTransfer.files;t.length>0&&!this.props.disabled&&this.props.onAdd&&(this.props.multiple||t.length<=1)&&this.props.onAdd.call(void 0,t)},this.isDragOver=e=>new Date().getTime()-(e||new Date).getTime()>i}get documentActive(){return this._documentActive}set documentActive(e){const t=this.documentActive;this._documentActive=e,e!==t&&this.forceUpdate()}get elementActive(){return this._elementActive}set elementActive(e){const t=this._elementActive;this._elementActive=e,e!==t&&this.setState({})}componentDidMount(){document.addEventListener("dragenter",this.onDocumentDragEnter),document.addEventListener("dragover",this.onDocumentDragOver)}componentWillUnmount(){document.removeEventListener("dragenter",this.onDocumentDragEnter),document.removeEventListener("dragover",this.onDocumentDragOver)}render(){const{addButtonComponent:e,fileGroup:t}=this.props,v=m.provideLocalizationService(this).toLanguageString(s.dropFilesHere,s.messages[s.dropFilesHere]),h=d.classNames("k-dropzone k-upload-dropzone",this.documentActive?"k-dropzone-active":"",this.elementActive?"k-dropzone-hovered":""),[a,l,c,p]=f.getFileStatus(t),g=d.classNames("k-dropzone-hint",{});return r.createElement("div",{className:h,onDrop:this.onDrop,onDragEnter:this.onElementDragEnter,onDragOver:this.onElementDragOver},e,a||l||c||p?r.createElement(_.UploadStatus,{isUploading:a,isUploaded:l,isUploadFailed:c}):r.createElement("div",{className:g},v))}}m.registerForLocalization(u);exports.UploadDropZone=u;