@progress/kendo-react-upload 14.3.0-develop.10 → 14.3.0-develop.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-progressbars"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("axios")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-progressbars","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","axios"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactUpload={},e.React,e.KendoReactCommon,e.KendoReactProgressbars,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.axios)}(this,function(e,t,s,o,n,i,a,l,r){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,o.get?o:{enumerable:!0,get:function(){return e[s]}})}}),t.default=e,Object.freeze(t)}var c=d(t),p=(e=>(e[e.UploadFailed=0]="UploadFailed",e[e.Initial=1]="Initial",e[e.Selected=2]="Selected",e[e.Uploading=3]="Uploading",e[e.Uploaded=4]="Uploaded",e[e.RemoveFailed=5]="RemoveFailed",e[e.Removing=6]="Removing",e))(p||{});const u="upload.cancel",h="upload.clearSelectedFiles",m="upload.dropFilesHere",g="upload.headerStatusUploaded",v="upload.headerStatusUploading",f="upload.invalidFileExtension",y="upload.invalidFiles",E="upload.invalidMaxFileSize",k="upload.invalidMinFileSize",F="upload.remove",b="upload.retry",C="upload.select",U="upload.selectTitle",I="upload.selectNoFilesTitle",S="upload.uploadSelectedFiles",x="upload.total",D="upload.files",R="upload.statusUploaded",w="upload.statusUploadFailed",_="upload.dropZoneHint",N="upload.defaultDropZoneNote",B="upload.dropZoneNote",A={[u]:"Cancel",[h]:"Clear",[m]:"Drop files here to upload",[g]:"Done",[v]:"Uploading...",[f]:"File type not allowed.",[y]:"Invalid file(s). Please check file upload requirements.",[E]:"File size too large.",[k]:"File size too small.",[F]:"Remove",[b]:"Retry",[C]:"Select files...",[U]:"Press to select more files",[I]:"No files selected",[S]:"Upload",[x]:"Total",[D]:"files",[R]:"File(s) successfully uploaded.",[w]:"File(s) failed to upload.",[_]:"Drag and drop files here to upload.",[N]:"",[B]:"Only {0} files are allowed."},O=/&/g,L=/</g,z=/"/g,T=/'/g,M=/>/g,K=e=>(""+e).replace(O,"&").replace(L,"<").replace(M,">").replace(z,""").replace(T,"'"),j=e=>{const t=e.match(/\.([^\.]+)$/);return t?t[0]:""},H=e=>{const t=e.name,s=e.size;return{extension:j(t),name:K(t),getRawFile:()=>e,size:s,status:p.Selected,progress:0,uid:""}},P=e=>!!(e.validationErrors&&e.validationErrors.length>0),$={fileHasValidationErrors:P,filesHaveValidationErrors:e=>{for(const t of e)if(P(t))return!0;return!1},getTotalFilesSizeMessage:e=>{let t,s=0;if("number"!=typeof e[0].size)return"";for(t=0;t<e.length;t++)e[t].size&&(s+=e[t].size||0);return s/=1024,s<1024?s.toFixed(2)+" KB":(s/1024).toFixed(2)+" MB"},getAllFileInfo:e=>{const t=new Array;let s;for(s=0;s<e.length;s++)t.push(H(e[s]));return t},getFileInfo:H,getFileExtension:j,htmlEncode:K,assignGuidToFiles:(e,t)=>{const o=s.guid();return e.map(e=>(e.uid=t?o:s.guid(),e))},getFileStatus:e=>{let t=!1,s=!1,o=!1,n=!1;const i=e=>{e.forEach(e=>{e.status===p.Uploading&&(t=!0),e.status===p.Uploaded&&(s=!0),e.status===p.UploadFailed&&(o=!0),P(e)&&(n=!0)})};return Array.isArray(e)?i(e):Object.keys(e).forEach(t=>{i(e[t])}),[t,s,o,n]}};let q=class extends c.Component{constructor(e){super(e),this.buttonClassNames=e=>{const{actionFocused:t,retryFocused:o}=this.state;return s.classNames("k-icon-button k-upload-action",this.props.disabled?"k-disabled":"",t&&"action"===e||o&&"retry"===e?"k-focus":"")},this.onRetryFocus=()=>{this.setState({retryFocused:!0})},this.onRetryBlur=()=>{this.setState({retryFocused:!1})},this.onActionFocus=()=>{this.setState({actionFocused:!0})},this.onActionBlur=()=>{this.setState({actionFocused:!1})},this.onActionClick=()=>{const{status:e,uid:t,disabled:s,onCancel:o,onRemove:n}=this.props;s||e===p.Removing||(e===p.Uploading?o.call(void 0,t):n.call(void 0,t))},this.onRetryClick=()=>{const{uid:e,disabled:t,onRetry:s}=this.props;t||s.call(void 0,e)},this.state={retryFocused:!1,actionFocused:!1}}actionButtonTitle(e,t){return e===p.Uploading?t.toLanguageString(u,A[u]):t.toLanguageString(F,A[F])}retryButtonTitle(e){return e.toLanguageString(b,A[b])}render(){const{status:e,progress:t}=this.props,s=e===p.UploadFailed,o=e===p.Uploading,l=(e===p.Uploaded||e===p.Initial)&&!this.props.async.removeUrl,r=n.provideLocalizationService(this);return c.createElement("span",{className:"k-upload-actions"},o?c.createElement("span",{className:"k-upload-pct"},t,"%"):void 0,s?c.createElement(i.Button,{type:"button",fillMode:"flat",tabIndex:-1,className:this.buttonClassNames("retry"),onFocus:this.onRetryFocus,onBlur:this.onRetryBlur,onClick:this.onRetryClick,"aria-label":this.retryButtonTitle(r),title:this.retryButtonTitle(r),icon:"arrow-rotate-cw-small",svgIcon:a.arrowRotateCwSmallIcon}):void 0,l?void 0:c.createElement(i.Button,{type:"button",fillMode:"flat",tabIndex:-1,className:this.buttonClassNames("action"),onFocus:this.onActionFocus,onBlur:this.onActionBlur,onClick:this.onActionClick,"aria-label":this.actionButtonTitle(e,r),"aria-hidden":!0,title:this.actionButtonTitle(e,r),icon:e===p.Uploading?"cancel":"x",svgIcon:e===p.Uploading?a.cancelIcon:a.xIcon}))}};n.registerForLocalization(q);let G=class extends c.Component{getFileExtension(e){return e.extension?e.extension.substring(1):""}getFileValidationMessage(e,t){const s=n.provideLocalizationService(this);let o="";if(t)o=s.toLanguageString(w,A[w]);else if(e.validationErrors&&e.validationErrors.length>0){const t=`upload.${e.validationErrors[0]}`;o=s.toLanguageString(t,A[t])}return o}renderValidationError(e,t){return c.createElement("span",{className:"k-file-info",key:"2"},c.createElement("span",{className:"k-file-name",title:e.name},e.name),c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},this.getFileValidationMessage(e,t)))}renderFileDetails(e){const t=n.provideLocalizationService(this).toLanguageString(R,A[R]);return c.createElement("span",{className:"k-file-info",key:"2"},c.createElement("span",{className:"k-file-name",title:e.name},e.name),100!==e.progress?c.createElement("span",{className:"k-file-size"},$.getTotalFilesSizeMessage([e])):c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},t))}render(){const{files:e,...t}=this.props,n=e[0],[,i,a,l]=$.getFileStatus([n]),r=!l&&!i&&!a;return c.createElement("div",{className:s.classNames("k-file-single")},r&&c.createElement(o.ProgressBar,{value:n.progress||0,tabIndex:-1}),c.createElement("span",{className:"k-file-icon-wrapper",key:"1"},c.createElement(s.IconWrap,{className:"k-file-icon",...s.getFileExtensionIcon(n.extension),size:"xxlarge"}),c.createElement("span",{className:"k-file-state"})),l||a?this.renderValidationError(n,a):this.renderFileDetails(n),c.createElement(q,{uid:n.uid,status:n.status,progress:n.progress,...t}))}};n.registerForLocalization(G);class V extends c.Component{constructor(){super(...arguments),this.mapFiles=()=>{const{files:e}=this.props;return e.map(e=>c.createElement("span",{key:e.name,className:"k-file-info"},c.createElement("span",{className:"k-file-name",title:e.name},e.name),$.fileHasValidationErrors(e)?c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},this.getFileValidationMessage(e)):c.createElement("span",{key:`${e.name}-size`,className:"k-file-size"},$.getTotalFilesSizeMessage([e]))))},this.progress=()=>{const{files:e}=this.props;let t=0;return e.forEach(e=>{t+=e.progress||0}),t/e.length}}getFileValidationMessage(e){const t=n.provideLocalizationService(this);let s="";if(e.validationErrors&&e.validationErrors.length>0){const o=`upload.${e.validationErrors[0]}`;s=t.toLanguageString(o,A[o])}return s}render(){const{files:e,...t}=this.props,[,i,l,r]=$.getFileStatus(e),d=n.provideLocalizationService(this),p=d.toLanguageString(x,A[x]),u=d.toLanguageString(D,A[D]),h=d.toLanguageString(w,A[w]),m=d.toLanguageString(R,A[R]),g=this.progress();return c.createElement("div",{className:s.classNames("k-file-multiple")},!r&&!i&&!l&&c.createElement(o.ProgressBar,{value:g||0}),c.createElement("span",{className:"k-file-icon-wrapper"},c.createElement(s.IconWrap,{className:"k-file-icon",name:"copy",icon:a.copyIcon,size:"xxlarge"})),c.createElement("span",{className:"k-multiple-files-wrapper"},this.mapFiles(),l?c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},`${e.length} ${h}`):100!==g?c.createElement("span",{className:"k-file-summary"},`${p}: ${e.length} ${u}, ${$.getTotalFilesSizeMessage(e)}`):c.createElement("span",{className:"k-file-summary k-text-success"},`${e.length} ${m}`)),c.createElement(q,{uid:e[0].uid,status:e[0].status,progress:g,...t}))}}n.registerForLocalization(V);class W extends c.Component{constructor(){super(...arguments),this._element=null,this.onClick=()=>{this.props.onClick.call(void 0,this.props.index)}}componentDidUpdate(){const{navigationIndex:e,index:t}=this.props,o=s.getActiveElement(document);e===t&&this._element&&o!==this._element&&this._element.focus()}render(){const{files:e,async:t,disabled:o,navigationIndex:n,index:i,listItemUI:a,onCancel:l,onRemove:r,onRetry:d}=this.props,u=e[0],h=u.status===p.Uploaded||u.status===p.Initial,m=s.classNames("k-file",$.filesHaveValidationErrors(e)?"k-file-error k-file-invalid":"",u.status===p.UploadFailed||u.status===p.RemoveFailed?"k-file-error":"",u.status===p.Uploading?"k-file-progress":"",h?"k-file-success":"",n===i?"k-focus":""),g={async:t,disabled:o,onCancel:l,onRemove:r,onRetry:d},v=a||(1===e.length?G:V);return c.createElement("li",{ref:e=>{this._element=e},className:m,"data-uid":u.uid,onClick:this.onClick,role:"listitem"},c.createElement(v,{files:e,...g}))}}let Z=class extends c.Component{mapListGroups(){const{groupedFiles:e,navigationIndex:t,...s}=this.props;return Object.keys(e).map((o,n)=>{const i=e[o];return c.createElement(W,{key:o,files:i,index:n,navigationIndex:t,...s})})}render(){const e=s.classNames("k-upload-files");return c.createElement("ul",{className:e,role:"list",id:this.props.listId},this.mapListGroups())}};const J=/(chrome)[ \/]([\w.]+)/i,Q=/(webkit)[ \/]([\w.]+)/i;let X=class extends c.Component{constructor(){super(...arguments),this._input=null,this.onMouseDown=e=>{this.props.onMouseDown&&this.props.onMouseDown(e)},this.onAdd=()=>{const e=navigator.userAgent,t=this._input;t&&(this.props.onAdd&&t.files&&this.props.onAdd.call(void 0,t.files),!e.match(J)&&e.match(Q)||(t.type="",t.type="file"))}}get actionElement(){return this._input}render(){const{multiple:e,async:t,disabled:s,accept:o,hasFiles:i,ariaLabelledBy:a,ariaDescribedBy:l,id:r}=this.props,d=n.provideLocalizationService(this),p=i?U:I,u=d.toLanguageString(p,A[p]),h=d.toLanguageString(C,A[C]);return c.createElement("input",{id:r,ref:e=>{this._input=e},className:"k-hidden",autoComplete:"off",name:t.saveField,accept:o,type:"file",multiple:e,disabled:s,onChange:this.onAdd,onMouseDown:this.onMouseDown,title:u,tabIndex:-1,"data-testid":"upload-input-testid","aria-label":void 0!==a?void 0:h,"aria-labelledby":a,"aria-describedby":l,"aria-hidden":!0})}};n.registerForLocalization(X);const Y=e=>c.createElement("span",{"aria-hidden":!0},e.message);let ee=class extends c.Component{constructor(){super(...arguments),this._element=null,this._uploadInput=null,this.focus=()=>{this._element&&this._element.focus()},this.onClick=()=>{this.actionElement&&this.actionElement.click(),this.props.onClick.call(void 0,this.props.addButtonIndex)},this.onInputMouseDown=e=>{this._element&&(e.preventDefault(),this._element.focus())}}get actionElement(){if(this._uploadInput)return this._uploadInput.actionElement}componentDidUpdate(e){const{navigationIndex:t,addButtonIndex:s,notFocusedIndex:o}=this.props;t!==e.navigationIndex&&e.navigationIndex!==o&&t===s&&this._element&&this._element.focus()}render(){const{navigationIndex:e,addButtonIndex:t,tabIndex:o,id:a,ariaControls:l,disabled:r,ariaExpanded:d,selectMessageUI:p,...u}=this.props,h=n.provideLocalizationService(this).toLanguageString(C,A[C]),m=p||Y;return c.createElement("div",{className:"k-upload-button-wrap"},c.createElement(i.Button,{type:"button",id:a?`${a}-select-button`:"select-button",className:s.classNames("k-upload-button",e===t?"k-focus":""),tabIndex:o,onClick:this.onClick,"aria-label":h,"aria-controls":l,"aria-disabled":r,"aria-expanded":d},c.createElement(m,{message:h})),c.createElement(X,{id:a?`${a}-files`:"files",...u,onMouseDown:this.onInputMouseDown,ref:e=>{this._uploadInput=e}}))}};n.registerForLocalization(ee);let te=class extends c.Component{constructor(){super(...arguments),this._uploadElement=null,this._clearElement=null,this.onClearClick=()=>{this.props.disabled||this.props.onClear&&this.props.onClear.call(void 0)},this.checkEnterKey=e=>e.keyCode===s.Keys.enter,this.onUploadClick=()=>{this.props.disabled||(this.props.onClick.call(void 0,this.props.uploadButtonIndex),this.props.onUpload&&this.props.onUpload.call(void 0))}}componentDidUpdate(e){const{navigationIndex:t,clearButtonIndex:s,uploadButtonIndex:o}=this.props;t!==e.navigationIndex&&(t===s&&this._clearElement&&this._clearElement.focus(),t===o&&this._uploadElement&&this._uploadElement.focus())}render(){const{disabled:e,navigationIndex:t,clearButtonIndex:o,uploadButtonIndex:i,actionsLayout:a}=this.props,l=n.provideLocalizationService(this),r=s.classNames("k-actions","k-hstack",{"k-justify-content-start":"start"===a,"k-justify-content-center":"center"===a,"k-justify-content-end":"end"===a,"k-justify-content-stretch":"stretched"===a}),d=s.classNames("k-button k-button-md k-rounded-md k-button-solid k-button-base","k-clear-selected",e?"k-disabled":"",t===o?"k-focus":""),p=s.classNames("k-button k-button-md k-rounded-md k-button-solid k-button-primary","k-primary","k-upload-selected",e?"k-disabled":"",t===i?"k-focus":"");return c.createElement("div",{className:r},c.createElement("button",{ref:e=>{this._clearElement=e},type:"button",className:d,tabIndex:0,onClick:this.onClearClick,onKeyDown:e=>this.checkEnterKey(e)&&this.onClearClick()},l.toLanguageString(h,A[h])),c.createElement("button",{ref:e=>{this._uploadElement=e},type:"button",className:p,tabIndex:0,onClick:this.onUploadClick,onKeyDown:e=>this.checkEnterKey(e)&&this.onUploadClick()},l.toLanguageString(S,A[S])))}};n.registerForLocalization(te);let se=class extends c.Component{render(){const{isUploading:e,isUploaded:t,isUploadFailed:o}=this.props,i=s.classNames("k-upload-status"),l=e||o||!t?!e&&o?"exclamation-circle":e?"upload":"":"check",r=e||o||!t?!e&&o?{icon:a.exclamationCircleIcon}:e?{icon:a.uploadIcon}:{}:{icon:a.checkIcon};let d="";const p=n.provideLocalizationService(this);return e?d=p.toLanguageString(v,A[v]):(t||o)&&(d=p.toLanguageString(g,A[g])),c.createElement("div",{className:i},c.createElement(s.IconWrap,{name:l,...r}),d)}};n.registerForLocalization(se);class oe extends c.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,100)}},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,100)}},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()>100}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,o=n.provideLocalizationService(this).toLanguageString(m,A[m]),i=s.classNames("k-dropzone k-upload-dropzone",this.documentActive?"k-dropzone-active":"",this.elementActive?"k-dropzone-hovered":""),[a,l,r,d]=$.getFileStatus(t),p=s.classNames("k-dropzone-hint",{});return c.createElement("div",{className:i,onDrop:this.onDrop,onDragEnter:this.onElementDragEnter,onDragOver:this.onElementDragOver},e,a||l||r||d?c.createElement(se,{isUploading:a,isUploaded:l,isUploadFailed:r}):c.createElement("div",{className:p},o))}}n.registerForLocalization(oe);const ne=class extends c.Component{constructor(){super(...arguments),this._container=null,this._uploadAddButton=null,this.focus=()=>{if(this._uploadAddButton)return this._uploadAddButton.focus()},this.onAdd=e=>{this.props.onAdd&&this.props.onAdd.call(void 0,e)},this.onRetry=e=>{this.props.onRetry&&this.props.onRetry.call(void 0,e)},this.onCancel=e=>{this.props.onCancel&&this.props.onCancel.call(void 0,e)},this.onClear=()=>{this.props.onClear&&this.props.onClear.call(void 0)},this.onUpload=()=>{this.props.onUpload&&this.props.onUpload.call(void 0)},this.onRemove=e=>{this.props.onRemove&&this.props.onRemove.call(void 0,e)},this.onKeyDown=e=>{this.props.onKeyDown&&this.props.onKeyDown.call(void 0,e,this.isRtl)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,e)},this.onBlur=e=>{this.props.onBlur&&this.props.onBlur.call(void 0,e)},this.onClick=e=>{this.props.onClick&&this.props.onClick.call(void 0,e)}}get async(){const{autoUpload:e,batch:t,withCredentials:s,saveField:o,saveHeaders:n,saveMethod:i,saveUrl:a,responseType:l,removeField:r,removeHeaders:d,removeMethod:c,removeUrl:p}=this.props;return{autoUpload:e,batch:t,withCredentials:s,saveField:o,saveHeaders:n,saveMethod:i,saveUrl:a,responseType:l,removeField:r,removeHeaders:d,removeMethod:c,removeUrl:p}}get groupsCount(){return Object.keys(this.props.groupedFiles).length}get lastGroupIndex(){return this.groupsCount-1}get addButtonIndex(){return-1}get clearButtonIndex(){return this.lastGroupIndex+1}get uploadButtonIndex(){return this.lastGroupIndex+2}get isRtl(){return this._container&&"rtl"===getComputedStyle(this._container).direction||!1}get actionElement(){if(this._uploadAddButton)return this._uploadAddButton.actionElement}render(){const{multiple:e,disabled:t,tabIndex:o,accept:n,showFileList:i,groupedFiles:a,navigationIndex:l,showActionButtons:r,actionsLayout:d,notFocusedIndex:p,listItemUI:u,id:h,ariaLabelledBy:m,ariaDescribedBy:g,selectMessageUI:v}=this.props,f=s.classNames("k-upload",{"k-upload-empty":0===Object.keys(a).length},this.props.className,t?"k-disabled":""),y=`${h}-list`,E=c.createElement(ee,{id:h,ariaLabelledBy:m,ariaDescribedBy:g,ref:e=>{this._uploadAddButton=e},accept:n,async:this.async,addButtonIndex:this.addButtonIndex,navigationIndex:l,notFocusedIndex:p,tabIndex:o,multiple:e,disabled:t,hasFiles:!!a&&Object.keys(a).length>0,selectMessageUI:v,onAdd:this.onAdd,onClick:this.onClick,ariaControls:y,ariaExpanded:i});return c.createElement("div",{ref:e=>{this._container=e},className:f,onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur},c.createElement(oe,{addButtonComponent:E,fileGroup:a,disabled:t,multiple:e,onAdd:this.onAdd}),i?c.createElement(Z,{groupedFiles:a,disabled:t,async:this.async,navigationIndex:l,listItemUI:u,onCancel:this.onCancel,onRemove:this.onRemove,onRetry:this.onRetry,onClick:this.onClick,listId:y}):void 0,r?c.createElement(te,{disabled:t,navigationIndex:l,clearButtonIndex:this.clearButtonIndex,uploadButtonIndex:this.uploadButtonIndex,actionsLayout:d,onUpload:this.onUpload,onClear:this.onClear,onClick:this.onClick}):void 0)}};ne.defaultProps={disabled:!1,groupedFiles:{},multiple:!0,actionsLayout:"end"};let ie=ne;const ae=s.withIdHOC(ie);ae.displayName="KendoReactUploadUI";const le=-2,re=-1;class de extends c.Component{constructor(e){super(e),this._uploadUI=null,this.focus=()=>{this._uploadUI&&this._uploadUI.focus()},this.onKeyDown=(e,t)=>{const o=this.navIndex,n=Object.keys(this.props.groupedFiles),i=n.length-1,a=this.props.autoUpload||0===n.length?i:i+1,l=i+1,r=l+1,d=o===le?re:o;let c=o;switch(e.keyCode){case s.Keys.up:o>-1&&(c=d-1);break;case s.Keys.down:o<a&&(c=d+1);break;case s.Keys.left:t?o===l&&(c=d+1):o===r&&(c=d-1);break;case s.Keys.right:t?o===r&&(c=d-1):o===l&&(c=d+1);break;case s.Keys.enter:if(o===re||o===le){const e=s.getActiveElement(document);this.actionElement&&s.canUseDOM&&-1===(null==e?void 0:e.className.indexOf("k-upload-button"))&&-1===(null==e?void 0:e.className.indexOf("k-upload-selected"))&&-1===(null==e?void 0:e.className.indexOf("k-clear-selected"))&&this.actionElement.click()}o>=0&&o<=i&&this.onRetry(n[o]);break;case s.Keys.space:(o===re||o===le)&&this.actionElement&&this.actionElement.click(),e.preventDefault();break;case s.Keys.tab:c=le;break;case s.Keys.delete:o>=0&&o<=i&&(c=d-1,this.onRemove(n[o]));break;case s.Keys.esc:o>=0&&o<=i&&(c=d-1,this.onCancel(n[o]))}this.navIndex=c},this.onCancel=e=>{this.props.onCancel&&this.props.onCancel.call(void 0,e)},this.onClear=()=>{this.navIndex=re,this.props.onClear&&this.props.onClear.call(void 0)},this.onUpload=()=>{this.navIndex=re,this.props.onUpload&&this.props.onUpload.call(void 0)},this.onRetry=e=>{this.props.onRetry&&this.props.onRetry.call(void 0,e)},this.onRemove=e=>{this.navIndex=this.navIndex>re?this.navIndex-1:re,this.props.onRemove&&this.props.onRemove.call(void 0,e)},this.onAdd=e=>{this.navIndex=re,this.props.onAdd&&this.props.onAdd.call(void 0,e)},this.onClick=e=>{this.navIndex=e},this.onFocus=()=>{this._blurTimeout&&(clearTimeout(this._blurTimeout),this._blurTimeout=void 0)},this.onBlurTimeout=()=>{this.navIndex=le,this._blurTimeout=void 0},this.onBlur=()=>{clearTimeout(this._blurTimeout),this._blurTimeout=window.setTimeout(this.onBlurTimeout)},this._navIndex=le}get navIndex(){return this._navIndex}set navIndex(e){const t=this.navIndex;this._navIndex=e,e!==t&&this.forceUpdate()}get actionElement(){if(this._uploadUI)return this._uploadUI.actionElement}componentDidUpdate(e){const t=Object.keys(e.groupedFiles).length,s=Object.keys(this.props.groupedFiles).length;t>s&&this.navIndex>re&&(this.navIndex=this.navIndex-(t-s))}render(){const{onClear:e,onRemove:t,onRetry:s,onCancel:o,onUpload:n,onAdd:i,...a}=this.props;return c.createElement(ae,{ref:e=>{this._uploadUI=e},className:this.props.className,onKeyDown:this.onKeyDown,navigationIndex:this.navIndex,notFocusedIndex:le,onAdd:this.onAdd,onClear:this.onClear,onUpload:this.onUpload,onRemove:this.onRemove,onRetry:this.onRetry,onCancel:this.onCancel,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,...a})}}const ce=(e,t)=>{t.push(e)},pe=(e,t)=>{Object.keys(e).forEach(s=>{t(e[s],s)})},ue={copyState:e=>(e||[]).map(e=>({...e})),addMany:(e,t)=>{e.forEach(e=>ce(e,t))},add:ce,groupFilesByUid:e=>{const t={};return e.forEach(e=>{t[e.uid]?t[e.uid].push(e):t[e.uid]=[e]}),t},filesForUpload:e=>{const t={};return pe(e,(e,s)=>{let o=!0;e.forEach(e=>{(e.status!==p.Selected||e.validationErrors&&e.validationErrors.length>0)&&(o=!1)}),o&&(t[s]=e)}),t},setFilesStatus:(e,t)=>{pe(e,e=>{e.forEach(e=>{e.status=t})})},flatFileGroup:e=>{const t=[];return pe(e,e=>{t.push.apply(t,e)}),t},groupForEach:pe},he=(e,t)=>{Object.keys(t).forEach(s=>{e.append(s,t[s])})},me=(e,t,s)=>{const o=new FormData;return he(o,s),e.forEach(e=>{const s=e.getRawFile?e.getRawFile():"";s?o.append(t,s,e.name):o.append(t,s)}),o},ge=(e,t,s)=>{const o=new FormData;return he(o,s),e.forEach(e=>{o.append(t,e)}),o},ve=(e,t)=>({headers:e,responseType:t.responseType,withCredentials:t.withCredentials}),fe=e=>{const t={};return Object.keys(e).forEach(s=>{t[s]=e[s]}),t},ye=e=>{const{data:t,config:s,...o}=e;return{response:t,...o}},Ee="invalidMaxFileSize",ke="invalidMinFileSize",Fe="invalidFileExtension",be=(e,t)=>{t.length>0&&t.indexOf((e.extension||"").toLowerCase())<0&&(e.validationErrors=e.validationErrors||[],e.validationErrors.indexOf(Fe)<0&&e.validationErrors.push(Fe))},Ce=(e,t,s)=>{0!==t&&(e.size||0)<t&&(e.validationErrors=e.validationErrors||[],e.validationErrors.indexOf(ke)<0&&e.validationErrors.push(ke)),0!==s&&(e.size||0)>s&&(e.validationErrors=e.validationErrors||[],e.validationErrors.indexOf(Ee)<0&&e.validationErrors.push(Ee))},Ue=(e,t)=>{const s=(e=>e.map(e=>("."===e.substring(0,1)?e:"."+e).toLowerCase()))(t.allowedExtensions||[]),o=t.maxFileSize||0,n=t.minFileSize||0;let i;for(i=0;i<e.length;i++)be(e[i],s),Ce(e[i],n,o)},Ie=Object.freeze({name:"@progress/kendo-react-upload",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.3.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),Se=class extends c.Component{constructor(e){super(e),this._httpSubscriptions={},this._uploadNavigation=null,this.showLicenseWatermark=!1,this.focus=()=>{this._uploadNavigation&&this._uploadNavigation.focus()},this.triggerUpload=()=>{this.onUpload()},this.uploadFiles=e=>{const t=this.async;ue.setFilesStatus(e,p.Uploading),ue.groupForEach(e,(e,s)=>{const o={target:this,files:e,headers:fe(t.saveHeaders||{}),additionalData:{}};this.props.onBeforeUpload&&this.props.onBeforeUpload.call(void 0,o);const n=ve(o.headers,this.async),i=me(e,t.saveField,o.additionalData);if(this.isCustomSave)this.props.saveUrl(e,{formData:i,requestOptions:n},this.onUploadProgress).then(e=>this.onUploadSuccess(e.uid)).catch(e=>this.onUploadError(e.uid));else{const e=r.CancelToken.source();this._httpSubscriptions[s]=e,r({method:t.saveMethod,url:t.saveUrl,data:i,cancelToken:e.token,...n,onUploadProgress:e=>this.onUploadProgress(s,e)}).then(e=>this.onUploadSuccess(s,e)).catch(e=>this.onUploadError(s,e))}})},this.removeFiles=e=>{const t=this.async;ue.groupForEach(e,(e,s)=>{const o={target:this,files:e,headers:fe(t.removeHeaders||{}),additionalData:{}};this.props.onBeforeRemove&&this.props.onBeforeRemove.call(void 0,o);const n=e.map(e=>e.name),i=ve(o.headers,this.async),a=ge(n,t.removeField,o.additionalData);this.isCustomRemove?this.props.removeUrl(e,{formData:a,requestOptions:i}).then(e=>this.onRemoveSuccess(e.uid)).catch(e=>this.onRemoveError(e.uid)):r({method:t.removeMethod,url:t.removeUrl,data:a,...i}).then(e=>this.onRemoveSuccess(s,e)).catch(e=>this.onRemoveError(s,e))})},this.onUpload=()=>{const e=this.fileStateCopy,t=ue.groupFilesByUid(e),s=ue.filesForUpload(t);this.uploadFiles(s);const o=()=>{if(this.props.onStatusChange){const t={target:this,newState:e,affectedFiles:ue.flatFileGroup(s)};this.props.onStatusChange.call(void 0,t)}};this.isControlled?o():this.setState({files:e},o)},this.onAdd=e=>{let t,s=$.getAllFileInfo(e);if(s=$.assignGuidToFiles(s,this.async.batch),Ue(s,this.props.restrictions),t=this.props.multiple?this.fileStateCopy:[],ue.addMany(s,t),this.async.autoUpload){const e=ue.groupFilesByUid(t);this.uploadFiles(ue.filesForUpload(e))}const o=()=>{if(this.props.onAdd){const e={target:this,newState:t,affectedFiles:s};this.props.onAdd.call(void 0,e)}};this.isControlled?o():this.setState({files:t},o)},this.onUploadProgress=(e,t)=>{const s=Math.round(100*t.loaded/(t.total||0))||0,o=()=>{if(this.props.onProgress){const t=this.fileStateCopy,o=t.filter(t=>t.uid===e);this.setFilesProgress(t,s);const n={target:this,newState:t,affectedFiles:o};this.props.onProgress.call(void 0,n)}};this.isControlled?o():this.setState(t=>{const o=t.files,n=o.filter(t=>t.uid===e);if(this.setFilesProgress(n,s),n.length)return{files:o}},o)},this.onUploadSuccess=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e);o.forEach(e=>{e.status=p.Uploaded,e.progress=100}),delete this._httpSubscriptions[e];const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:s,affectedFiles:o,response:t?ye(t):void 0};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onUploadError=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e);if(o.forEach(e=>{e.status=p.UploadFailed}),delete this._httpSubscriptions[e],!o.length)return;const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:s,affectedFiles:o,response:t?ye(t):void 0};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onRemove=e=>{const t=this.fileStateCopy,s=t.filter(t=>t.uid===e),o=t.filter(t=>t.uid!==e);if([p.Uploaded,p.Initial,p.RemoveFailed].indexOf(s[0].status)>-1){const o={[e]:s};ue.setFilesStatus(o,p.Removing),this.removeFiles(o);const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:t,affectedFiles:s};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:t},n)}else{const e=()=>{if(this.props.onRemove){const e={target:this,newState:o,affectedFiles:s};this.props.onRemove.call(void 0,e)}};this.isControlled?e():this.setState({files:o},e)}},this.onRemoveSuccess=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e),n=s.filter(t=>t.uid!==e),i=()=>{if(this.props.onRemove){const e={target:this,newState:n,affectedFiles:o,response:t?ye(t):void 0};this.props.onRemove.call(void 0,e)}};this.isControlled?i():this.setState({files:n},i)},this.onRemoveError=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e);o.forEach(e=>{e.status=p.RemoveFailed});const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:s,affectedFiles:o,response:t?ye(t):void 0};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onRetry=e=>{const t=this.fileStateCopy,s=ue.groupFilesByUid(t.filter(t=>t.uid===e));ue.setFilesStatus(s,p.Uploading),this.uploadFiles(s);const o=()=>{if(this.props.onStatusChange){const e={target:this,newState:t,affectedFiles:ue.flatFileGroup(s)};this.props.onStatusChange.call(void 0,e)}};this.isControlled?o():this.setState({files:t},o)},this.onCancel=e=>{const t=this.fileStateCopy,s=t.filter(t=>t.uid!==e),o=t.filter(t=>t.uid===e);if(this._httpSubscriptions[e]&&(this._httpSubscriptions[e].cancel(),delete this._httpSubscriptions[e]),this.props.onCancel){const t={target:this,uid:e};this.props.onCancel.call(void 0,t)}const n=()=>{if(this.props.onRemove){const e={target:this,newState:s,affectedFiles:o};this.props.onRemove.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onClear=()=>{if(!this.files.length)return;Object.keys(this._httpSubscriptions).forEach(e=>{this._httpSubscriptions[e].cancel()}),this._httpSubscriptions={};const e=()=>{if(this.props.onRemove){const e={target:this,newState:[],affectedFiles:this.fileStateCopy};this.props.onRemove.call(void 0,e)}};this.isControlled?e():this.setState({files:[]},e)},this.showLicenseWatermark=!s.validatePackage(Ie,{component:"Upload"}),this.licenseMessage=s.getLicenseMessage(Ie),this.state={files:e.defaultFiles||[]}}get async(){const{autoUpload:e,batch:t,removeField:s,removeHeaders:o,removeMethod:n,removeUrl:i,responseType:a,saveField:l,saveHeaders:r,saveMethod:d,saveUrl:c,withCredentials:p}=this.props;return{autoUpload:e,batch:t,removeField:s,removeHeaders:o,removeMethod:n,removeUrl:i,responseType:a,saveField:l,saveHeaders:r,saveMethod:d,saveUrl:c,withCredentials:p}}get files(){return(this.isControlled?this.props.files:this.state.files)||[]}get isControlled(){return!this.props.defaultFiles}get isCustomSave(){return this.props.saveUrl&&"function"==typeof this.props.saveUrl}get isCustomRemove(){return this.props.removeUrl&&"function"==typeof this.props.removeUrl}get fileStateCopy(){return this.isControlled?ue.copyState(this.props.files):ue.copyState(this.state.files)}get actionElement(){if(this._uploadNavigation)return this._uploadNavigation.actionElement}setFilesProgress(e,t){e.forEach(e=>{e.progress=t})}render(){var e;const{showFileList:t,onAdd:o,onRemove:n,onCancel:i,autoUpload:a,showActionButtons:l,actionsLayout:r,tabIndex:d,disabled:p,...u}=this.props,h=ue.groupFilesByUid(this.files),m=ue.filesForUpload(h);return c.createElement(c.Fragment,null,c.createElement(de,{groupedFiles:h,className:this.props.className,showFileList:t&&!!Object.keys(h).length,showActionButtons:l&&!a&&(!!Object.keys(m).length||!(null==(e=this.props.defaultFiles)||!e.length)),actionsLayout:r,autoUpload:a,disabled:p,onAdd:this.onAdd,onRemove:this.onRemove,onClear:this.onClear,onUpload:this.onUpload,onRetry:this.onRetry,onCancel:this.onCancel,tabIndex:s.getTabIndex(d,p),ref:e=>{this._uploadNavigation=e},...u}),this.showLicenseWatermark&&c.createElement(s.WatermarkOverlay,{message:this.licenseMessage}))}};Se.defaultProps={autoUpload:!0,batch:!1,removeField:"fileNames",removeHeaders:{},removeMethod:"POST",removeUrl:"",responseType:"json",saveField:"files",saveHeaders:{},saveMethod:"POST",saveUrl:"",withCredentials:!0,restrictions:{allowedExtensions:[],maxFileSize:0,minFileSize:0},multiple:!0,showFileList:!0,showActionButtons:!0,actionsLayout:"end",disabled:!1},Se.propTypes={autoUpload:l.bool,batch:l.bool,withCredentials:l.bool,saveField:l.string,saveHeaders:l.object,saveMethod:l.string,saveUrl:l.oneOfType([l.string,l.func]),responseType:l.oneOf(["arraybuffer","blob","json","text"]),removeField:l.string,removeHeaders:l.object,removeMethod:l.string,removeUrl:l.oneOfType([l.string,l.func]),multiple:l.bool,disabled:l.bool,showFileList:l.bool,showActionButtons:l.bool,actionsLayout:l.oneOf(["start","center","end","stretched"]),tabIndex:l.number,accept:l.string,listItemUI:l.oneOfType([l.func,l.string,l.shape({render:l.func.isRequired})]),restrictions:l.shape({allowedExtensions:l.arrayOf(l.string),maxFileSize:l.number,minFileSize:l.number}),files:l.arrayOf(l.shape({uid:l.string,name:l.string,extension:l.string,size:l.number,validationErrors:l.arrayOf(l.string),status:l.oneOf([p.Initial,p.RemoveFailed,p.Removing,p.Selected,p.UploadFailed,p.Uploaded,p.Uploading]),progress:l.number,getRawFile:l.func})),defaultFiles:l.arrayOf(l.shape({uid:l.string,name:l.string,extension:l.string,size:l.number,validationErrors:l.arrayOf(l.string),status:l.oneOf([p.Initial,p.RemoveFailed,p.Removing,p.Selected,p.UploadFailed,p.Uploaded,p.Uploading]),progress:l.number,getRawFile:l.func}))};let xe=Se;const De=c.forwardRef((e,t)=>{const o=!s.validatePackage(Ie,{component:"ExternalDropZone"}),i=s.getLicenseMessage(Ie),l=c.useRef(null),r=c.useRef(null),d=c.useRef(null),p=c.useRef(!1),u=c.useRef(null),{uploadRef:h}=e,m=h.current,[g,v]=c.useState(!1),f=c.useMemo(()=>new n.IntlService("en"),[]),y=n.useLocalization(),E=y.toLanguageString(_,A[_]),[k,F]=c.useState(y.toLanguageString(N,A[N])),b=e.customHint||c.createElement("span",null,E),C=e.customNote||c.createElement("span",null,k),U=c.useCallback(()=>{r.current&&r.current.focus()},[r]);c.useImperativeHandle(l,()=>({element:r.current,focus:U,props:e})),c.useImperativeHandle(t,()=>l.current),c.useEffect(()=>{if(m){const e=m.props.restrictions.allowedExtensions;if(e&&e.length){const t=f.format(y.toLanguageString(B,A[B]),[e]);F(t)}}},[m,y,f]);const I=c.useCallback(e=>(new Date).getTime()-(e||new Date).getTime()>100,[]),S=c.useCallback(t=>{t.preventDefault();const s=t.dataTransfer.files;s.length>0&&!e.disabled&&h&&h.current&&(h.current.onAdd&&(t.preventDefault(),h.current.onAdd(s)),e.onDrop&&e.onDrop.call(void 0,t))},[e.disabled,h,e.onDrop]),x=c.useCallback(t=>{if(p){p.current=!0;const e=()=>{I(u.current)&&(v(!1),p.current=!1,clearInterval(d.current),d.current=null,u.current=null)};d.current=setInterval(e,100)}e.onElementDragEnter&&e.onElementDragEnter.call(void 0,t)},[p,d,u,I,e.onElementDragEnter]),D=c.useCallback(t=>{t.preventDefault(),u.current=new Date,v(!0),e.onElementDragOver&&e.onElementDragOver.call(void 0,t)},[u,e.onElementDragOver]);return c.createElement("div",{ref:r,id:e.id,className:s.classNames("k-external-dropzone",{"k-external-dropzone-hover":g,"k-disabled":e.disabled},e.className),tabIndex:s.getTabIndex(e.tabIndex,e.disabled,void 0),onDrop:S,onDragEnter:x,onDragOver:D},c.createElement("div",{style:e.style,className:"k-dropzone-inner"},c.createElement(s.IconWrap,{name:"upload",icon:a.uploadIcon,className:"k-dropzone-icon",size:"xxxlarge"}),c.createElement("span",{className:"k-dropzone-hint"},b),c.createElement("span",{className:"k-dropzone-note"},C)),o&&c.createElement(s.WatermarkOverlay,{message:i}))}),Re={id:l.string,tabIndex:l.number,editorRef:l.oneOfType([l.func,l.shape({current:l.any})]),disabled:l.bool,onDrop:l.func,onElementDragEnter:l.func,onElementDragOver:l.func};De.displayName="KendoReactExternalDropZone",De.propTypes=Re,e.ExternalDropZone=De,e.Upload=xe,e.UploadActionButtons=te,e.UploadAddButton=ee,e.UploadDropZone=oe,e.UploadFileStatus=p,e.UploadInput=X,e.UploadList=Z,e.UploadListActionButton=q,e.UploadListGroup=W,e.UploadListMultiItem=V,e.UploadListSingleItem=G,e.UploadStatus=se,e.UploadUI=ae,e.headerStatusUploaded=g,e.headerStatusUploading=v,e.invalidMaxFileSize=E,e.uploadMessages=A,e.uploadSelect=C,e.uploadUtils=$});
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@progress/kendo-react-common"),require("@progress/kendo-react-progressbars"),require("@progress/kendo-react-intl"),require("@progress/kendo-react-buttons"),require("@progress/kendo-svg-icons"),require("prop-types"),require("axios")):"function"==typeof define&&define.amd?define(["exports","react","@progress/kendo-react-common","@progress/kendo-react-progressbars","@progress/kendo-react-intl","@progress/kendo-react-buttons","@progress/kendo-svg-icons","prop-types","axios"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactUpload={},e.React,e.KendoReactCommon,e.KendoReactProgressbars,e.KendoReactIntl,e.KendoReactButtons,e.KendoSvgIcons,e.PropTypes,e.axios)}(this,function(e,t,s,o,n,i,a,l,r){"use strict";function d(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,o.get?o:{enumerable:!0,get:function(){return e[s]}})}}),t.default=e,Object.freeze(t)}var c=d(t),p=(e=>(e[e.UploadFailed=0]="UploadFailed",e[e.Initial=1]="Initial",e[e.Selected=2]="Selected",e[e.Uploading=3]="Uploading",e[e.Uploaded=4]="Uploaded",e[e.RemoveFailed=5]="RemoveFailed",e[e.Removing=6]="Removing",e))(p||{});const u="upload.cancel",h="upload.clearSelectedFiles",m="upload.dropFilesHere",g="upload.headerStatusUploaded",v="upload.headerStatusUploading",f="upload.invalidFileExtension",y="upload.invalidFiles",E="upload.invalidMaxFileSize",k="upload.invalidMinFileSize",F="upload.remove",b="upload.retry",C="upload.select",U="upload.selectTitle",I="upload.selectNoFilesTitle",S="upload.uploadSelectedFiles",x="upload.total",D="upload.files",R="upload.statusUploaded",w="upload.statusUploadFailed",_="upload.dropZoneHint",N="upload.defaultDropZoneNote",B="upload.dropZoneNote",A={[u]:"Cancel",[h]:"Clear",[m]:"Drop files here to upload",[g]:"Done",[v]:"Uploading...",[f]:"File type not allowed.",[y]:"Invalid file(s). Please check file upload requirements.",[E]:"File size too large.",[k]:"File size too small.",[F]:"Remove",[b]:"Retry",[C]:"Select files...",[U]:"Press to select more files",[I]:"No files selected",[S]:"Upload",[x]:"Total",[D]:"files",[R]:"File(s) successfully uploaded.",[w]:"File(s) failed to upload.",[_]:"Drag and drop files here to upload.",[N]:"",[B]:"Only {0} files are allowed."},O=/&/g,L=/</g,z=/"/g,T=/'/g,M=/>/g,K=e=>(""+e).replace(O,"&").replace(L,"<").replace(M,">").replace(z,""").replace(T,"'"),j=e=>{const t=e.match(/\.([^\.]+)$/);return t?t[0]:""},H=e=>{const t=e.name,s=e.size;return{extension:j(t),name:K(t),getRawFile:()=>e,size:s,status:p.Selected,progress:0,uid:""}},P=e=>!!(e.validationErrors&&e.validationErrors.length>0),$={fileHasValidationErrors:P,filesHaveValidationErrors:e=>{for(const t of e)if(P(t))return!0;return!1},getTotalFilesSizeMessage:e=>{let t,s=0;if("number"!=typeof e[0].size)return"";for(t=0;t<e.length;t++)e[t].size&&(s+=e[t].size||0);return s/=1024,s<1024?s.toFixed(2)+" KB":(s/1024).toFixed(2)+" MB"},getAllFileInfo:e=>{const t=new Array;let s;for(s=0;s<e.length;s++)t.push(H(e[s]));return t},getFileInfo:H,getFileExtension:j,htmlEncode:K,assignGuidToFiles:(e,t)=>{const o=s.guid();return e.map(e=>(e.uid=t?o:s.guid(),e))},getFileStatus:e=>{let t=!1,s=!1,o=!1,n=!1;const i=e=>{e.forEach(e=>{e.status===p.Uploading&&(t=!0),e.status===p.Uploaded&&(s=!0),e.status===p.UploadFailed&&(o=!0),P(e)&&(n=!0)})};return Array.isArray(e)?i(e):Object.keys(e).forEach(t=>{i(e[t])}),[t,s,o,n]}};let q=class extends c.Component{constructor(e){super(e),this.buttonClassNames=e=>{const{actionFocused:t,retryFocused:o}=this.state;return s.classNames("k-icon-button k-upload-action",this.props.disabled?"k-disabled":"",t&&"action"===e||o&&"retry"===e?"k-focus":"")},this.onRetryFocus=()=>{this.setState({retryFocused:!0})},this.onRetryBlur=()=>{this.setState({retryFocused:!1})},this.onActionFocus=()=>{this.setState({actionFocused:!0})},this.onActionBlur=()=>{this.setState({actionFocused:!1})},this.onActionClick=()=>{const{status:e,uid:t,disabled:s,onCancel:o,onRemove:n}=this.props;s||e===p.Removing||(e===p.Uploading?o.call(void 0,t):n.call(void 0,t))},this.onRetryClick=()=>{const{uid:e,disabled:t,onRetry:s}=this.props;t||s.call(void 0,e)},this.state={retryFocused:!1,actionFocused:!1}}actionButtonTitle(e,t){return e===p.Uploading?t.toLanguageString(u,A[u]):t.toLanguageString(F,A[F])}retryButtonTitle(e){return e.toLanguageString(b,A[b])}render(){const{status:e,progress:t}=this.props,s=e===p.UploadFailed,o=e===p.Uploading,l=(e===p.Uploaded||e===p.Initial)&&!this.props.async.removeUrl,r=n.provideLocalizationService(this);return c.createElement("span",{className:"k-upload-actions"},o?c.createElement("span",{className:"k-upload-pct"},t,"%"):void 0,s?c.createElement(i.Button,{type:"button",fillMode:"flat",tabIndex:-1,className:this.buttonClassNames("retry"),onFocus:this.onRetryFocus,onBlur:this.onRetryBlur,onClick:this.onRetryClick,"aria-label":this.retryButtonTitle(r),title:this.retryButtonTitle(r),icon:"arrow-rotate-cw-small",svgIcon:a.arrowRotateCwSmallIcon}):void 0,l?void 0:c.createElement(i.Button,{type:"button",fillMode:"flat",tabIndex:-1,className:this.buttonClassNames("action"),onFocus:this.onActionFocus,onBlur:this.onActionBlur,onClick:this.onActionClick,"aria-label":this.actionButtonTitle(e,r),"aria-hidden":!0,title:this.actionButtonTitle(e,r),icon:e===p.Uploading?"cancel":"x",svgIcon:e===p.Uploading?a.cancelIcon:a.xIcon}))}};n.registerForLocalization(q);let G=class extends c.Component{getFileExtension(e){return e.extension?e.extension.substring(1):""}getFileValidationMessage(e,t){const s=n.provideLocalizationService(this);let o="";if(t)o=s.toLanguageString(w,A[w]);else if(e.validationErrors&&e.validationErrors.length>0){const t=`upload.${e.validationErrors[0]}`;o=s.toLanguageString(t,A[t])}return o}renderValidationError(e,t){return c.createElement("span",{className:"k-file-info",key:"2"},c.createElement("span",{className:"k-file-name",title:e.name},e.name),c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},this.getFileValidationMessage(e,t)))}renderFileDetails(e){const t=n.provideLocalizationService(this).toLanguageString(R,A[R]);return c.createElement("span",{className:"k-file-info",key:"2"},c.createElement("span",{className:"k-file-name",title:e.name},e.name),100!==e.progress?c.createElement("span",{className:"k-file-size"},$.getTotalFilesSizeMessage([e])):c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},t))}render(){const{files:e,...t}=this.props,n=e[0],[,i,a,l]=$.getFileStatus([n]),r=!l&&!i&&!a;return c.createElement("div",{className:s.classNames("k-file-single")},r&&c.createElement(o.ProgressBar,{value:n.progress||0,tabIndex:-1}),c.createElement("span",{className:"k-file-icon-wrapper",key:"1"},c.createElement(s.IconWrap,{className:"k-file-icon",...s.getFileExtensionIcon(n.extension),size:"xxlarge"}),c.createElement("span",{className:"k-file-state"})),l||a?this.renderValidationError(n,a):this.renderFileDetails(n),c.createElement(q,{uid:n.uid,status:n.status,progress:n.progress,...t}))}};n.registerForLocalization(G);class V extends c.Component{constructor(){super(...arguments),this.mapFiles=()=>{const{files:e}=this.props;return e.map(e=>c.createElement("span",{key:e.name,className:"k-file-info"},c.createElement("span",{className:"k-file-name",title:e.name},e.name),$.fileHasValidationErrors(e)?c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},this.getFileValidationMessage(e)):c.createElement("span",{key:`${e.name}-size`,className:"k-file-size"},$.getTotalFilesSizeMessage([e]))))},this.progress=()=>{const{files:e}=this.props;let t=0;return e.forEach(e=>{t+=e.progress||0}),t/e.length}}getFileValidationMessage(e){const t=n.provideLocalizationService(this);let s="";if(e.validationErrors&&e.validationErrors.length>0){const o=`upload.${e.validationErrors[0]}`;s=t.toLanguageString(o,A[o])}return s}render(){const{files:e,...t}=this.props,[,i,l,r]=$.getFileStatus(e),d=n.provideLocalizationService(this),p=d.toLanguageString(x,A[x]),u=d.toLanguageString(D,A[D]),h=d.toLanguageString(w,A[w]),m=d.toLanguageString(R,A[R]),g=this.progress();return c.createElement("div",{className:s.classNames("k-file-multiple")},!r&&!i&&!l&&c.createElement(o.ProgressBar,{value:g||0}),c.createElement("span",{className:"k-file-icon-wrapper"},c.createElement(s.IconWrap,{className:"k-file-icon",name:"copy",icon:a.copyIcon,size:"xxlarge"})),c.createElement("span",{className:"k-multiple-files-wrapper"},this.mapFiles(),l?c.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},`${e.length} ${h}`):100!==g?c.createElement("span",{className:"k-file-summary"},`${p}: ${e.length} ${u}, ${$.getTotalFilesSizeMessage(e)}`):c.createElement("span",{className:"k-file-summary k-text-success"},`${e.length} ${m}`)),c.createElement(q,{uid:e[0].uid,status:e[0].status,progress:g,...t}))}}n.registerForLocalization(V);class W extends c.Component{constructor(){super(...arguments),this._element=null,this.onClick=()=>{this.props.onClick.call(void 0,this.props.index)}}componentDidUpdate(){const{navigationIndex:e,index:t}=this.props,o=s.getActiveElement(document);e===t&&this._element&&o!==this._element&&this._element.focus()}render(){const{files:e,async:t,disabled:o,navigationIndex:n,index:i,listItemUI:a,onCancel:l,onRemove:r,onRetry:d}=this.props,u=e[0],h=u.status===p.Uploaded||u.status===p.Initial,m=s.classNames("k-file",$.filesHaveValidationErrors(e)?"k-file-error k-file-invalid":"",u.status===p.UploadFailed||u.status===p.RemoveFailed?"k-file-error":"",u.status===p.Uploading?"k-file-progress":"",h?"k-file-success":"",n===i?"k-focus":""),g={async:t,disabled:o,onCancel:l,onRemove:r,onRetry:d},v=a||(1===e.length?G:V);return c.createElement("li",{ref:e=>{this._element=e},className:m,"data-uid":u.uid,onClick:this.onClick,role:"listitem"},c.createElement(v,{files:e,...g}))}}let Z=class extends c.Component{mapListGroups(){const{groupedFiles:e,navigationIndex:t,...s}=this.props;return Object.keys(e).map((o,n)=>{const i=e[o];return c.createElement(W,{key:o,files:i,index:n,navigationIndex:t,...s})})}render(){const e=s.classNames("k-upload-files");return c.createElement("ul",{className:e,role:"list",id:this.props.listId},this.mapListGroups())}};const J=/(chrome)[ \/]([\w.]+)/i,Q=/(webkit)[ \/]([\w.]+)/i;let X=class extends c.Component{constructor(){super(...arguments),this._input=null,this.onMouseDown=e=>{this.props.onMouseDown&&this.props.onMouseDown(e)},this.onAdd=()=>{const e=navigator.userAgent,t=this._input;t&&(this.props.onAdd&&t.files&&this.props.onAdd.call(void 0,t.files),!e.match(J)&&e.match(Q)||(t.type="",t.type="file"))}}get actionElement(){return this._input}render(){const{multiple:e,async:t,disabled:s,accept:o,hasFiles:i,ariaLabelledBy:a,ariaDescribedBy:l,id:r}=this.props,d=n.provideLocalizationService(this),p=i?U:I,u=d.toLanguageString(p,A[p]),h=d.toLanguageString(C,A[C]);return c.createElement("input",{id:r,ref:e=>{this._input=e},className:"k-hidden",autoComplete:"off",name:t.saveField,accept:o,type:"file",multiple:e,disabled:s,onChange:this.onAdd,onMouseDown:this.onMouseDown,title:u,tabIndex:-1,"data-testid":"upload-input-testid","aria-label":void 0!==a?void 0:h,"aria-labelledby":a,"aria-describedby":l,"aria-hidden":!0})}};n.registerForLocalization(X);const Y=e=>c.createElement("span",{"aria-hidden":!0},e.message);let ee=class extends c.Component{constructor(){super(...arguments),this._element=null,this._uploadInput=null,this.focus=()=>{this._element&&this._element.focus()},this.onClick=()=>{this.actionElement&&this.actionElement.click(),this.props.onClick.call(void 0,this.props.addButtonIndex)},this.onInputMouseDown=e=>{this._element&&(e.preventDefault(),this._element.focus())}}get actionElement(){if(this._uploadInput)return this._uploadInput.actionElement}componentDidUpdate(e){const{navigationIndex:t,addButtonIndex:s,notFocusedIndex:o}=this.props;t!==e.navigationIndex&&e.navigationIndex!==o&&t===s&&this._element&&this._element.focus()}render(){const{navigationIndex:e,addButtonIndex:t,tabIndex:o,id:a,ariaControls:l,disabled:r,ariaExpanded:d,selectMessageUI:p,...u}=this.props,h=n.provideLocalizationService(this).toLanguageString(C,A[C]),m=p||Y;return c.createElement("div",{className:"k-upload-button-wrap"},c.createElement(i.Button,{type:"button",id:a?`${a}-select-button`:"select-button",className:s.classNames("k-upload-button",e===t?"k-focus":""),tabIndex:o,onClick:this.onClick,"aria-label":h,"aria-controls":l,"aria-disabled":r,"aria-expanded":d},c.createElement(m,{message:h})),c.createElement(X,{id:a?`${a}-files`:"files",...u,onMouseDown:this.onInputMouseDown,ref:e=>{this._uploadInput=e}}))}};n.registerForLocalization(ee);let te=class extends c.Component{constructor(){super(...arguments),this._uploadElement=null,this._clearElement=null,this.onClearClick=()=>{this.props.disabled||this.props.onClear&&this.props.onClear.call(void 0)},this.checkEnterKey=e=>e.keyCode===s.Keys.enter,this.onUploadClick=()=>{this.props.disabled||(this.props.onClick.call(void 0,this.props.uploadButtonIndex),this.props.onUpload&&this.props.onUpload.call(void 0))}}componentDidUpdate(e){const{navigationIndex:t,clearButtonIndex:s,uploadButtonIndex:o}=this.props;t!==e.navigationIndex&&(t===s&&this._clearElement&&this._clearElement.focus(),t===o&&this._uploadElement&&this._uploadElement.focus())}render(){const{disabled:e,navigationIndex:t,clearButtonIndex:o,uploadButtonIndex:i,actionsLayout:a}=this.props,l=n.provideLocalizationService(this),r=s.classNames("k-actions","k-hstack",{"k-justify-content-start":"start"===a,"k-justify-content-center":"center"===a,"k-justify-content-end":"end"===a,"k-justify-content-stretch":"stretched"===a}),d=s.classNames("k-button k-button-md k-rounded-md k-button-solid k-button-base","k-clear-selected",e?"k-disabled":"",t===o?"k-focus":""),p=s.classNames("k-button k-button-md k-rounded-md k-button-solid k-button-primary","k-primary","k-upload-selected",e?"k-disabled":"",t===i?"k-focus":"");return c.createElement("div",{className:r},c.createElement("button",{ref:e=>{this._clearElement=e},type:"button",className:d,tabIndex:0,onClick:this.onClearClick,onKeyDown:e=>this.checkEnterKey(e)&&this.onClearClick()},l.toLanguageString(h,A[h])),c.createElement("button",{ref:e=>{this._uploadElement=e},type:"button",className:p,tabIndex:0,onClick:this.onUploadClick,onKeyDown:e=>this.checkEnterKey(e)&&this.onUploadClick()},l.toLanguageString(S,A[S])))}};n.registerForLocalization(te);let se=class extends c.Component{render(){const{isUploading:e,isUploaded:t,isUploadFailed:o}=this.props,i=s.classNames("k-upload-status"),l=e||o||!t?!e&&o?"exclamation-circle":e?"upload":"":"check",r=e||o||!t?!e&&o?{icon:a.exclamationCircleIcon}:e?{icon:a.uploadIcon}:{}:{icon:a.checkIcon};let d="";const p=n.provideLocalizationService(this);return e?d=p.toLanguageString(v,A[v]):(t||o)&&(d=p.toLanguageString(g,A[g])),c.createElement("div",{className:i},c.createElement(s.IconWrap,{name:l,...r}),d)}};n.registerForLocalization(se);class oe extends c.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,100)}},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,100)}},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()>100}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,o=n.provideLocalizationService(this).toLanguageString(m,A[m]),i=s.classNames("k-dropzone k-upload-dropzone",this.documentActive?"k-dropzone-active":"",this.elementActive?"k-dropzone-hovered":""),[a,l,r,d]=$.getFileStatus(t),p=s.classNames("k-dropzone-hint",{});return c.createElement("div",{className:i,onDrop:this.onDrop,onDragEnter:this.onElementDragEnter,onDragOver:this.onElementDragOver},e,a||l||r||d?c.createElement(se,{isUploading:a,isUploaded:l,isUploadFailed:r}):c.createElement("div",{className:p},o))}}n.registerForLocalization(oe);const ne=class extends c.Component{constructor(){super(...arguments),this._container=null,this._uploadAddButton=null,this.focus=()=>{if(this._uploadAddButton)return this._uploadAddButton.focus()},this.onAdd=e=>{this.props.onAdd&&this.props.onAdd.call(void 0,e)},this.onRetry=e=>{this.props.onRetry&&this.props.onRetry.call(void 0,e)},this.onCancel=e=>{this.props.onCancel&&this.props.onCancel.call(void 0,e)},this.onClear=()=>{this.props.onClear&&this.props.onClear.call(void 0)},this.onUpload=()=>{this.props.onUpload&&this.props.onUpload.call(void 0)},this.onRemove=e=>{this.props.onRemove&&this.props.onRemove.call(void 0,e)},this.onKeyDown=e=>{this.props.onKeyDown&&this.props.onKeyDown.call(void 0,e,this.isRtl)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,e)},this.onBlur=e=>{this.props.onBlur&&this.props.onBlur.call(void 0,e)},this.onClick=e=>{this.props.onClick&&this.props.onClick.call(void 0,e)}}get async(){const{autoUpload:e,batch:t,withCredentials:s,saveField:o,saveHeaders:n,saveMethod:i,saveUrl:a,responseType:l,removeField:r,removeHeaders:d,removeMethod:c,removeUrl:p}=this.props;return{autoUpload:e,batch:t,withCredentials:s,saveField:o,saveHeaders:n,saveMethod:i,saveUrl:a,responseType:l,removeField:r,removeHeaders:d,removeMethod:c,removeUrl:p}}get groupsCount(){return Object.keys(this.props.groupedFiles).length}get lastGroupIndex(){return this.groupsCount-1}get addButtonIndex(){return-1}get clearButtonIndex(){return this.lastGroupIndex+1}get uploadButtonIndex(){return this.lastGroupIndex+2}get isRtl(){return this._container&&"rtl"===getComputedStyle(this._container).direction||!1}get actionElement(){if(this._uploadAddButton)return this._uploadAddButton.actionElement}render(){const{multiple:e,disabled:t,tabIndex:o,accept:n,showFileList:i,groupedFiles:a,navigationIndex:l,showActionButtons:r,actionsLayout:d,notFocusedIndex:p,listItemUI:u,id:h,ariaLabelledBy:m,ariaDescribedBy:g,selectMessageUI:v}=this.props,f=s.classNames("k-upload",{"k-upload-empty":0===Object.keys(a).length},this.props.className,t?"k-disabled":""),y=`${h}-list`,E=c.createElement(ee,{id:h,ariaLabelledBy:m,ariaDescribedBy:g,ref:e=>{this._uploadAddButton=e},accept:n,async:this.async,addButtonIndex:this.addButtonIndex,navigationIndex:l,notFocusedIndex:p,tabIndex:o,multiple:e,disabled:t,hasFiles:!!a&&Object.keys(a).length>0,selectMessageUI:v,onAdd:this.onAdd,onClick:this.onClick,ariaControls:y,ariaExpanded:i});return c.createElement("div",{ref:e=>{this._container=e},className:f,onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur},c.createElement(oe,{addButtonComponent:E,fileGroup:a,disabled:t,multiple:e,onAdd:this.onAdd}),i?c.createElement(Z,{groupedFiles:a,disabled:t,async:this.async,navigationIndex:l,listItemUI:u,onCancel:this.onCancel,onRemove:this.onRemove,onRetry:this.onRetry,onClick:this.onClick,listId:y}):void 0,r?c.createElement(te,{disabled:t,navigationIndex:l,clearButtonIndex:this.clearButtonIndex,uploadButtonIndex:this.uploadButtonIndex,actionsLayout:d,onUpload:this.onUpload,onClear:this.onClear,onClick:this.onClick}):void 0)}};ne.defaultProps={disabled:!1,groupedFiles:{},multiple:!0,actionsLayout:"end"};let ie=ne;const ae=s.withIdHOC(ie);ae.displayName="KendoReactUploadUI";const le=-2,re=-1;class de extends c.Component{constructor(e){super(e),this._uploadUI=null,this.focus=()=>{this._uploadUI&&this._uploadUI.focus()},this.onKeyDown=(e,t)=>{const o=this.navIndex,n=Object.keys(this.props.groupedFiles),i=n.length-1,a=this.props.autoUpload||0===n.length?i:i+1,l=i+1,r=l+1,d=o===le?re:o;let c=o;switch(e.keyCode){case s.Keys.up:o>-1&&(c=d-1);break;case s.Keys.down:o<a&&(c=d+1);break;case s.Keys.left:t?o===l&&(c=d+1):o===r&&(c=d-1);break;case s.Keys.right:t?o===r&&(c=d-1):o===l&&(c=d+1);break;case s.Keys.enter:if(o===re||o===le){const e=s.getActiveElement(document);this.actionElement&&s.canUseDOM&&-1===(null==e?void 0:e.className.indexOf("k-upload-button"))&&-1===(null==e?void 0:e.className.indexOf("k-upload-selected"))&&-1===(null==e?void 0:e.className.indexOf("k-clear-selected"))&&this.actionElement.click()}o>=0&&o<=i&&this.onRetry(n[o]);break;case s.Keys.space:(o===re||o===le)&&this.actionElement&&this.actionElement.click(),e.preventDefault();break;case s.Keys.tab:c=le;break;case s.Keys.delete:o>=0&&o<=i&&(c=d-1,this.onRemove(n[o]));break;case s.Keys.esc:o>=0&&o<=i&&(c=d-1,this.onCancel(n[o]))}this.navIndex=c},this.onCancel=e=>{this.props.onCancel&&this.props.onCancel.call(void 0,e)},this.onClear=()=>{this.navIndex=re,this.props.onClear&&this.props.onClear.call(void 0)},this.onUpload=()=>{this.navIndex=re,this.props.onUpload&&this.props.onUpload.call(void 0)},this.onRetry=e=>{this.props.onRetry&&this.props.onRetry.call(void 0,e)},this.onRemove=e=>{this.navIndex=this.navIndex>re?this.navIndex-1:re,this.props.onRemove&&this.props.onRemove.call(void 0,e)},this.onAdd=e=>{this.navIndex=re,this.props.onAdd&&this.props.onAdd.call(void 0,e)},this.onClick=e=>{this.navIndex=e},this.onFocus=()=>{this._blurTimeout&&(clearTimeout(this._blurTimeout),this._blurTimeout=void 0)},this.onBlurTimeout=()=>{this.navIndex=le,this._blurTimeout=void 0},this.onBlur=()=>{clearTimeout(this._blurTimeout),this._blurTimeout=window.setTimeout(this.onBlurTimeout)},this._navIndex=le}get navIndex(){return this._navIndex}set navIndex(e){const t=this.navIndex;this._navIndex=e,e!==t&&this.forceUpdate()}get actionElement(){if(this._uploadUI)return this._uploadUI.actionElement}componentDidUpdate(e){const t=Object.keys(e.groupedFiles).length,s=Object.keys(this.props.groupedFiles).length;t>s&&this.navIndex>re&&(this.navIndex=this.navIndex-(t-s))}render(){const{onClear:e,onRemove:t,onRetry:s,onCancel:o,onUpload:n,onAdd:i,...a}=this.props;return c.createElement(ae,{ref:e=>{this._uploadUI=e},className:this.props.className,onKeyDown:this.onKeyDown,navigationIndex:this.navIndex,notFocusedIndex:le,onAdd:this.onAdd,onClear:this.onClear,onUpload:this.onUpload,onRemove:this.onRemove,onRetry:this.onRetry,onCancel:this.onCancel,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur,...a})}}const ce=(e,t)=>{t.push(e)},pe=(e,t)=>{Object.keys(e).forEach(s=>{t(e[s],s)})},ue={copyState:e=>(e||[]).map(e=>({...e})),addMany:(e,t)=>{e.forEach(e=>ce(e,t))},add:ce,groupFilesByUid:e=>{const t={};return e.forEach(e=>{t[e.uid]?t[e.uid].push(e):t[e.uid]=[e]}),t},filesForUpload:e=>{const t={};return pe(e,(e,s)=>{let o=!0;e.forEach(e=>{(e.status!==p.Selected||e.validationErrors&&e.validationErrors.length>0)&&(o=!1)}),o&&(t[s]=e)}),t},setFilesStatus:(e,t)=>{pe(e,e=>{e.forEach(e=>{e.status=t})})},flatFileGroup:e=>{const t=[];return pe(e,e=>{t.push.apply(t,e)}),t},groupForEach:pe},he=(e,t)=>{Object.keys(t).forEach(s=>{e.append(s,t[s])})},me=(e,t,s)=>{const o=new FormData;return he(o,s),e.forEach(e=>{const s=e.getRawFile?e.getRawFile():"";s?o.append(t,s,e.name):o.append(t,s)}),o},ge=(e,t,s)=>{const o=new FormData;return he(o,s),e.forEach(e=>{o.append(t,e)}),o},ve=(e,t)=>({headers:e,responseType:t.responseType,withCredentials:t.withCredentials}),fe=e=>{const t={};return Object.keys(e).forEach(s=>{t[s]=e[s]}),t},ye=e=>{const{data:t,config:s,...o}=e;return{response:t,...o}},Ee="invalidMaxFileSize",ke="invalidMinFileSize",Fe="invalidFileExtension",be=(e,t)=>{t.length>0&&t.indexOf((e.extension||"").toLowerCase())<0&&(e.validationErrors=e.validationErrors||[],e.validationErrors.indexOf(Fe)<0&&e.validationErrors.push(Fe))},Ce=(e,t,s)=>{0!==t&&(e.size||0)<t&&(e.validationErrors=e.validationErrors||[],e.validationErrors.indexOf(ke)<0&&e.validationErrors.push(ke)),0!==s&&(e.size||0)>s&&(e.validationErrors=e.validationErrors||[],e.validationErrors.indexOf(Ee)<0&&e.validationErrors.push(Ee))},Ue=(e,t)=>{const s=(e=>e.map(e=>("."===e.substring(0,1)?e:"."+e).toLowerCase()))(t.allowedExtensions||[]),o=t.maxFileSize||0,n=t.minFileSize||0;let i;for(i=0;i<e.length;i++)be(e[i],s),Ce(e[i],n,o)},Ie=Object.freeze({name:"@progress/kendo-react-upload",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"14.3.0-develop.11",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"}),Se=class extends c.Component{constructor(e){super(e),this._httpSubscriptions={},this._uploadNavigation=null,this.showLicenseWatermark=!1,this.focus=()=>{this._uploadNavigation&&this._uploadNavigation.focus()},this.triggerUpload=()=>{this.onUpload()},this.uploadFiles=e=>{const t=this.async;ue.setFilesStatus(e,p.Uploading),ue.groupForEach(e,(e,s)=>{const o={target:this,files:e,headers:fe(t.saveHeaders||{}),additionalData:{}};this.props.onBeforeUpload&&this.props.onBeforeUpload.call(void 0,o);const n=ve(o.headers,this.async),i=me(e,t.saveField,o.additionalData);if(this.isCustomSave)this.props.saveUrl(e,{formData:i,requestOptions:n},this.onUploadProgress).then(e=>this.onUploadSuccess(e.uid)).catch(e=>this.onUploadError(e.uid));else{const e=r.CancelToken.source();this._httpSubscriptions[s]=e,r({method:t.saveMethod,url:t.saveUrl,data:i,cancelToken:e.token,...n,onUploadProgress:e=>this.onUploadProgress(s,e)}).then(e=>this.onUploadSuccess(s,e)).catch(e=>this.onUploadError(s,e))}})},this.removeFiles=e=>{const t=this.async;ue.groupForEach(e,(e,s)=>{const o={target:this,files:e,headers:fe(t.removeHeaders||{}),additionalData:{}};this.props.onBeforeRemove&&this.props.onBeforeRemove.call(void 0,o);const n=e.map(e=>e.name),i=ve(o.headers,this.async),a=ge(n,t.removeField,o.additionalData);this.isCustomRemove?this.props.removeUrl(e,{formData:a,requestOptions:i}).then(e=>this.onRemoveSuccess(e.uid)).catch(e=>this.onRemoveError(e.uid)):r({method:t.removeMethod,url:t.removeUrl,data:a,...i}).then(e=>this.onRemoveSuccess(s,e)).catch(e=>this.onRemoveError(s,e))})},this.onUpload=()=>{const e=this.fileStateCopy,t=ue.groupFilesByUid(e),s=ue.filesForUpload(t);this.uploadFiles(s);const o=()=>{if(this.props.onStatusChange){const t={target:this,newState:e,affectedFiles:ue.flatFileGroup(s)};this.props.onStatusChange.call(void 0,t)}};this.isControlled?o():this.setState({files:e},o)},this.onAdd=e=>{let t,s=$.getAllFileInfo(e);if(s=$.assignGuidToFiles(s,this.async.batch),Ue(s,this.props.restrictions),t=this.props.multiple?this.fileStateCopy:[],ue.addMany(s,t),this.async.autoUpload){const e=ue.groupFilesByUid(t);this.uploadFiles(ue.filesForUpload(e))}const o=()=>{if(this.props.onAdd){const e={target:this,newState:t,affectedFiles:s};this.props.onAdd.call(void 0,e)}};this.isControlled?o():this.setState({files:t},o)},this.onUploadProgress=(e,t)=>{const s=Math.round(100*t.loaded/(t.total||0))||0,o=()=>{if(this.props.onProgress){const t=this.fileStateCopy,o=t.filter(t=>t.uid===e);this.setFilesProgress(t,s);const n={target:this,newState:t,affectedFiles:o};this.props.onProgress.call(void 0,n)}};this.isControlled?o():this.setState(t=>{const o=t.files,n=o.filter(t=>t.uid===e);if(this.setFilesProgress(n,s),n.length)return{files:o}},o)},this.onUploadSuccess=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e);o.forEach(e=>{e.status=p.Uploaded,e.progress=100}),delete this._httpSubscriptions[e];const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:s,affectedFiles:o,response:t?ye(t):void 0};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onUploadError=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e);if(o.forEach(e=>{e.status=p.UploadFailed}),delete this._httpSubscriptions[e],!o.length)return;const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:s,affectedFiles:o,response:t?ye(t):void 0};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onRemove=e=>{const t=this.fileStateCopy,s=t.filter(t=>t.uid===e),o=t.filter(t=>t.uid!==e);if([p.Uploaded,p.Initial,p.RemoveFailed].indexOf(s[0].status)>-1){const o={[e]:s};ue.setFilesStatus(o,p.Removing),this.removeFiles(o);const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:t,affectedFiles:s};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:t},n)}else{const e=()=>{if(this.props.onRemove){const e={target:this,newState:o,affectedFiles:s};this.props.onRemove.call(void 0,e)}};this.isControlled?e():this.setState({files:o},e)}},this.onRemoveSuccess=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e),n=s.filter(t=>t.uid!==e),i=()=>{if(this.props.onRemove){const e={target:this,newState:n,affectedFiles:o,response:t?ye(t):void 0};this.props.onRemove.call(void 0,e)}};this.isControlled?i():this.setState({files:n},i)},this.onRemoveError=(e,t)=>{const s=this.fileStateCopy,o=s.filter(t=>t.uid===e);o.forEach(e=>{e.status=p.RemoveFailed});const n=()=>{if(this.props.onStatusChange){const e={target:this,newState:s,affectedFiles:o,response:t?ye(t):void 0};this.props.onStatusChange.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onRetry=e=>{const t=this.fileStateCopy,s=ue.groupFilesByUid(t.filter(t=>t.uid===e));ue.setFilesStatus(s,p.Uploading),this.uploadFiles(s);const o=()=>{if(this.props.onStatusChange){const e={target:this,newState:t,affectedFiles:ue.flatFileGroup(s)};this.props.onStatusChange.call(void 0,e)}};this.isControlled?o():this.setState({files:t},o)},this.onCancel=e=>{const t=this.fileStateCopy,s=t.filter(t=>t.uid!==e),o=t.filter(t=>t.uid===e);if(this._httpSubscriptions[e]&&(this._httpSubscriptions[e].cancel(),delete this._httpSubscriptions[e]),this.props.onCancel){const t={target:this,uid:e};this.props.onCancel.call(void 0,t)}const n=()=>{if(this.props.onRemove){const e={target:this,newState:s,affectedFiles:o};this.props.onRemove.call(void 0,e)}};this.isControlled?n():this.setState({files:s},n)},this.onClear=()=>{if(!this.files.length)return;Object.keys(this._httpSubscriptions).forEach(e=>{this._httpSubscriptions[e].cancel()}),this._httpSubscriptions={};const e=()=>{if(this.props.onRemove){const e={target:this,newState:[],affectedFiles:this.fileStateCopy};this.props.onRemove.call(void 0,e)}};this.isControlled?e():this.setState({files:[]},e)},this.showLicenseWatermark=!s.validatePackage(Ie,{component:"Upload"}),this.licenseMessage=s.getLicenseMessage(Ie),this.state={files:e.defaultFiles||[]}}get async(){const{autoUpload:e,batch:t,removeField:s,removeHeaders:o,removeMethod:n,removeUrl:i,responseType:a,saveField:l,saveHeaders:r,saveMethod:d,saveUrl:c,withCredentials:p}=this.props;return{autoUpload:e,batch:t,removeField:s,removeHeaders:o,removeMethod:n,removeUrl:i,responseType:a,saveField:l,saveHeaders:r,saveMethod:d,saveUrl:c,withCredentials:p}}get files(){return(this.isControlled?this.props.files:this.state.files)||[]}get isControlled(){return!this.props.defaultFiles}get isCustomSave(){return this.props.saveUrl&&"function"==typeof this.props.saveUrl}get isCustomRemove(){return this.props.removeUrl&&"function"==typeof this.props.removeUrl}get fileStateCopy(){return this.isControlled?ue.copyState(this.props.files):ue.copyState(this.state.files)}get actionElement(){if(this._uploadNavigation)return this._uploadNavigation.actionElement}setFilesProgress(e,t){e.forEach(e=>{e.progress=t})}render(){var e;const{showFileList:t,onAdd:o,onRemove:n,onCancel:i,autoUpload:a,showActionButtons:l,actionsLayout:r,tabIndex:d,disabled:p,...u}=this.props,h=ue.groupFilesByUid(this.files),m=ue.filesForUpload(h);return c.createElement(c.Fragment,null,c.createElement(de,{groupedFiles:h,className:this.props.className,showFileList:t&&!!Object.keys(h).length,showActionButtons:l&&!a&&(!!Object.keys(m).length||!(null==(e=this.props.defaultFiles)||!e.length)),actionsLayout:r,autoUpload:a,disabled:p,onAdd:this.onAdd,onRemove:this.onRemove,onClear:this.onClear,onUpload:this.onUpload,onRetry:this.onRetry,onCancel:this.onCancel,tabIndex:s.getTabIndex(d,p),ref:e=>{this._uploadNavigation=e},...u}),this.showLicenseWatermark&&c.createElement(s.WatermarkOverlay,{message:this.licenseMessage}))}};Se.defaultProps={autoUpload:!0,batch:!1,removeField:"fileNames",removeHeaders:{},removeMethod:"POST",removeUrl:"",responseType:"json",saveField:"files",saveHeaders:{},saveMethod:"POST",saveUrl:"",withCredentials:!0,restrictions:{allowedExtensions:[],maxFileSize:0,minFileSize:0},multiple:!0,showFileList:!0,showActionButtons:!0,actionsLayout:"end",disabled:!1},Se.propTypes={autoUpload:l.bool,batch:l.bool,withCredentials:l.bool,saveField:l.string,saveHeaders:l.object,saveMethod:l.string,saveUrl:l.oneOfType([l.string,l.func]),responseType:l.oneOf(["arraybuffer","blob","json","text"]),removeField:l.string,removeHeaders:l.object,removeMethod:l.string,removeUrl:l.oneOfType([l.string,l.func]),multiple:l.bool,disabled:l.bool,showFileList:l.bool,showActionButtons:l.bool,actionsLayout:l.oneOf(["start","center","end","stretched"]),tabIndex:l.number,accept:l.string,listItemUI:l.oneOfType([l.func,l.string,l.shape({render:l.func.isRequired})]),restrictions:l.shape({allowedExtensions:l.arrayOf(l.string),maxFileSize:l.number,minFileSize:l.number}),files:l.arrayOf(l.shape({uid:l.string,name:l.string,extension:l.string,size:l.number,validationErrors:l.arrayOf(l.string),status:l.oneOf([p.Initial,p.RemoveFailed,p.Removing,p.Selected,p.UploadFailed,p.Uploaded,p.Uploading]),progress:l.number,getRawFile:l.func})),defaultFiles:l.arrayOf(l.shape({uid:l.string,name:l.string,extension:l.string,size:l.number,validationErrors:l.arrayOf(l.string),status:l.oneOf([p.Initial,p.RemoveFailed,p.Removing,p.Selected,p.UploadFailed,p.Uploaded,p.Uploading]),progress:l.number,getRawFile:l.func}))};let xe=Se;const De=c.forwardRef((e,t)=>{const o=!s.validatePackage(Ie,{component:"ExternalDropZone"}),i=s.getLicenseMessage(Ie),l=c.useRef(null),r=c.useRef(null),d=c.useRef(null),p=c.useRef(!1),u=c.useRef(null),{uploadRef:h}=e,m=h.current,[g,v]=c.useState(!1),f=c.useMemo(()=>new n.IntlService("en"),[]),y=n.useLocalization(),E=y.toLanguageString(_,A[_]),[k,F]=c.useState(y.toLanguageString(N,A[N])),b=e.customHint||c.createElement("span",null,E),C=e.customNote||c.createElement("span",null,k),U=c.useCallback(()=>{r.current&&r.current.focus()},[r]);c.useImperativeHandle(l,()=>({element:r.current,focus:U,props:e})),c.useImperativeHandle(t,()=>l.current),c.useEffect(()=>{if(m){const e=m.props.restrictions.allowedExtensions;if(e&&e.length){const t=f.format(y.toLanguageString(B,A[B]),[e]);F(t)}}},[m,y,f]);const I=c.useCallback(e=>(new Date).getTime()-(e||new Date).getTime()>100,[]),S=c.useCallback(t=>{t.preventDefault();const s=t.dataTransfer.files;s.length>0&&!e.disabled&&h&&h.current&&(h.current.onAdd&&(t.preventDefault(),h.current.onAdd(s)),e.onDrop&&e.onDrop.call(void 0,t))},[e.disabled,h,e.onDrop]),x=c.useCallback(t=>{if(p){p.current=!0;const e=()=>{I(u.current)&&(v(!1),p.current=!1,clearInterval(d.current),d.current=null,u.current=null)};d.current=setInterval(e,100)}e.onElementDragEnter&&e.onElementDragEnter.call(void 0,t)},[p,d,u,I,e.onElementDragEnter]),D=c.useCallback(t=>{t.preventDefault(),u.current=new Date,v(!0),e.onElementDragOver&&e.onElementDragOver.call(void 0,t)},[u,e.onElementDragOver]);return c.createElement("div",{ref:r,id:e.id,className:s.classNames("k-external-dropzone",{"k-external-dropzone-hover":g,"k-disabled":e.disabled},e.className),tabIndex:s.getTabIndex(e.tabIndex,e.disabled,void 0),onDrop:S,onDragEnter:x,onDragOver:D},c.createElement("div",{style:e.style,className:"k-dropzone-inner"},c.createElement(s.IconWrap,{name:"upload",icon:a.uploadIcon,className:"k-dropzone-icon",size:"xxxlarge"}),c.createElement("span",{className:"k-dropzone-hint"},b),c.createElement("span",{className:"k-dropzone-note"},C)),o&&c.createElement(s.WatermarkOverlay,{message:i}))}),Re={id:l.string,tabIndex:l.number,editorRef:l.oneOfType([l.func,l.shape({current:l.any})]),disabled:l.bool,onDrop:l.func,onElementDragEnter:l.func,onElementDragOver:l.func};De.displayName="KendoReactExternalDropZone",De.propTypes=Re,e.ExternalDropZone=De,e.Upload=xe,e.UploadActionButtons=te,e.UploadAddButton=ee,e.UploadDropZone=oe,e.UploadFileStatus=p,e.UploadInput=X,e.UploadList=Z,e.UploadListActionButton=q,e.UploadListGroup=W,e.UploadListMultiItem=V,e.UploadListSingleItem=G,e.UploadStatus=se,e.UploadUI=ae,e.headerStatusUploaded=g,e.headerStatusUploading=v,e.invalidMaxFileSize=E,e.uploadMessages=A,e.uploadSelect=C,e.uploadUtils=$});
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-upload",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-upload",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1774616665,version:"14.3.0-develop.11",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
|
|
|
7
7
|
productName: 'KendoReact',
|
|
8
8
|
productCode: 'KENDOUIREACT',
|
|
9
9
|
productCodes: ['KENDOUIREACT'],
|
|
10
|
-
publishDate:
|
|
11
|
-
version: '14.3.0-develop.
|
|
10
|
+
publishDate: 1774616665,
|
|
11
|
+
version: '14.3.0-develop.11',
|
|
12
12
|
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-upload",
|
|
3
|
-
"version": "14.3.0-develop.
|
|
3
|
+
"version": "14.3.0-develop.11",
|
|
4
4
|
"description": "React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-buttons": "14.3.0-develop.
|
|
30
|
-
"@progress/kendo-react-common": "14.3.0-develop.
|
|
31
|
-
"@progress/kendo-react-intl": "14.3.0-develop.
|
|
32
|
-
"@progress/kendo-react-progressbars": "14.3.0-develop.
|
|
29
|
+
"@progress/kendo-react-buttons": "14.3.0-develop.11",
|
|
30
|
+
"@progress/kendo-react-common": "14.3.0-develop.11",
|
|
31
|
+
"@progress/kendo-react-intl": "14.3.0-develop.11",
|
|
32
|
+
"@progress/kendo-react-progressbars": "14.3.0-develop.11",
|
|
33
33
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
34
34
|
"axios": "^1.13.2",
|
|
35
35
|
"react": "^18.0.0 || ^19.0.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"package": {
|
|
57
57
|
"productName": "KendoReact",
|
|
58
58
|
"productCode": "KENDOUIREACT",
|
|
59
|
-
"publishDate":
|
|
59
|
+
"publishDate": 1774616665,
|
|
60
60
|
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
61
61
|
}
|
|
62
62
|
},
|