@progress/kendo-react-upload/UploadUI.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 k=require("react"),B=require("@progress/kendo-react-common"),x=require("./UploadList.js"),R=require("./UploadAddButton.js"),_=require("./UploadActionButtons.js"),D=require("./UploadDropZone.js");function F(i){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const o in i)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(i,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>i[o]})}}return t.default=i,Object.freeze(t)}const s=F(k),O=-1,y=class y extends s.Component{constructor(){super(...arguments),this._container=null,this._uploadAddButton=null,this.focus=()=>{if(this._uploadAddButton)return this._uploadAddButton.focus()},this.onAdd=t=>{this.props.onAdd&&this.props.onAdd.call(void 0,t)},this.onRetry=t=>{this.props.onRetry&&this.props.onRetry.call(void 0,t)},this.onCancel=t=>{this.props.onCancel&&this.props.onCancel.call(void 0,t)},this.onClear=()=>{this.props.onClear&&this.props.onClear.call(void 0)},this.onUpload=()=>{this.props.onUpload&&this.props.onUpload.call(void 0)},this.onRemove=t=>{this.props.onRemove&&this.props.onRemove.call(void 0,t)},this.onKeyDown=t=>{this.props.onKeyDown&&this.props.onKeyDown.call(void 0,t,this.isRtl)},this.onFocus=t=>{this.props.onFocus&&this.props.onFocus.call(void 0,t)},this.onBlur=t=>{this.props.onBlur&&this.props.onBlur.call(void 0,t)},this.onClick=t=>{this.props.onClick&&this.props.onClick.call(void 0,t)}}get async(){const{autoUpload:t,batch:o,withCredentials:n,saveField:p,saveHeaders:r,saveMethod:e,saveUrl:l,responseType:c,removeField:u,removeHeaders:h,removeMethod:m,removeUrl:a}=this.props;return{autoUpload:t,batch:o,withCredentials:n,saveField:p,saveHeaders:r,saveMethod:e,saveUrl:l,responseType:c,removeField:u,removeHeaders:h,removeMethod:m,removeUrl:a}}get groupsCount(){return Object.keys(this.props.groupedFiles).length}get lastGroupIndex(){return this.groupsCount-1}get addButtonIndex(){return O}get clearButtonIndex(){return this.lastGroupIndex+1}get uploadButtonIndex(){return this.lastGroupIndex+2}get isRtl(){return this._container&&getComputedStyle(this._container).direction==="rtl"||!1}get actionElement(){if(this._uploadAddButton)return this._uploadAddButton.actionElement}render(){const{multiple:t,disabled:o,tabIndex:n,accept:p,showFileList:r,groupedFiles:e,navigationIndex:l,showActionButtons:c,actionsLayout:u,notFocusedIndex:h,listItemUI:m,id:a,ariaLabelledBy:C,ariaDescribedBy:I,selectMessageUI:U}=this.props,A=B.classNames("k-upload",{"k-upload-empty":Object.keys(e).length===0},this.props.className,o?"k-disabled":""),v=`${a}-list`,b=s.createElement(R.UploadAddButton,{id:a,ariaLabelledBy:C,ariaDescribedBy:I,ref:f=>{this._uploadAddButton=f},accept:p,async:this.async,addButtonIndex:this.addButtonIndex,navigationIndex:l,notFocusedIndex:h,tabIndex:n,multiple:t,disabled:o,hasFiles:e?Object.keys(e).length>0:!1,selectMessageUI:U,onAdd:this.onAdd,onClick:this.onClick,ariaControls:v,ariaExpanded:r});return s.createElement("div",{ref:f=>{this._container=f},className:A,onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur},s.createElement(D.UploadDropZone,{addButtonComponent:b,fileGroup:e,disabled:o,multiple:t,onAdd:this.onAdd}),r?s.createElement(x.UploadList,{groupedFiles:e,disabled:o,async:this.async,navigationIndex:l,listItemUI:m,onCancel:this.onCancel,onRemove:this.onRemove,onRetry:this.onRetry,onClick:this.onClick,listId:v}):void 0,c?s.createElement(_.UploadActionButtons,{disabled:o,navigationIndex:l,clearButtonIndex:this.clearButtonIndex,uploadButtonIndex:this.uploadButtonIndex,actionsLayout:u,onUpload:this.onUpload,onClear:this.onClear,onClick:this.onClick}):void 0)}};y.defaultProps={disabled:!1,groupedFiles:{},multiple:!0,actionsLayout:"end"};let d=y;const g=B.withIdHOC(d);g.displayName="KendoReactUploadUI";exports.UploadUI=g;exports.UploadUIClassComponent=d;