@progress/kendo-react-upload/Upload.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 w=require("react"),t=require("prop-types"),F=require("@progress/kendo-react-common"),r=require("./interfaces/UploadFileStatus.js"),E=require("./UploadNavigation.js"),U=require("axios"),R=require("./utils/utils.js"),d=require("./utils/stateUtils.js"),f=require("./utils/connectionUtils.js"),O=require("./utils/validationUtils.js"),D=require("./package-metadata.js");function P(g){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(g){for(const s in g)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(g,s);Object.defineProperty(u,s,e.get?e:{enumerable:!0,get:()=>g[s]})}}return u.default=g,Object.freeze(u)}const S=P(w),m=class m extends S.Component{constructor(u){super(u),this._httpSubscriptions={},this._uploadNavigation=null,this.showLicenseWatermark=!1,this.focus=()=>{this._uploadNavigation&&this._uploadNavigation.focus()},this.triggerUpload=()=>{this.onUpload()},this.uploadFiles=s=>{const e=this.async;d.setFilesStatus(s,r.UploadFileStatus.Uploading),d.groupForEach(s,(o,a)=>{const n=f.cloneRequestHeaders(e.saveHeaders||{}),l={target:this,files:o,headers:n,additionalData:{}};this.props.onBeforeUpload&&this.props.onBeforeUpload.call(void 0,l);const h=f.populateRequestOptions(l.headers,this.async),v=f.populateUploadFormData(o,e.saveField,l.additionalData);if(this.isCustomSave)this.props.saveUrl(o,{formData:v,requestOptions:h},this.onUploadProgress).then(c=>this.onUploadSuccess(c.uid)).catch(c=>this.onUploadError(c.uid));else{const c=U.CancelToken.source();this._httpSubscriptions[a]=c,U({method:e.saveMethod,url:e.saveUrl,data:v,cancelToken:c.token,...h,onUploadProgress:p=>this.onUploadProgress(a,p)}).then(p=>this.onUploadSuccess(a,p)).catch(p=>this.onUploadError(a,p))}})},this.removeFiles=s=>{const e=this.async;d.groupForEach(s,(o,a)=>{const n=f.cloneRequestHeaders(e.removeHeaders||{}),l={target:this,files:o,headers:n,additionalData:{}};this.props.onBeforeRemove&&this.props.onBeforeRemove.call(void 0,l);const h=o.map(p=>p.name),v=f.populateRequestOptions(l.headers,this.async),c=f.populateRemoveFormData(h,e.removeField,l.additionalData);this.isCustomRemove?this.props.removeUrl(o,{formData:c,requestOptions:v}).then(p=>this.onRemoveSuccess(p.uid)).catch(p=>this.onRemoveError(p.uid)):U({method:e.removeMethod,url:e.removeUrl,data:c,...v}).then(p=>this.onRemoveSuccess(a,p)).catch(p=>this.onRemoveError(a,p))})},this.onUpload=()=>{const s=this.fileStateCopy,e=d.groupFilesByUid(s),o=d.filesForUpload(e);this.uploadFiles(o);const a=()=>{if(this.props.onStatusChange){const n={target:this,newState:s,affectedFiles:d.flatFileGroup(o)};this.props.onStatusChange.call(void 0,n)}};this.isControlled?a():this.setState({files:s},a)},this.onAdd=s=>{let e=R.getAllFileInfo(s),o;if(e=R.assignGuidToFiles(e,this.async.batch),O.validateFiles(e,this.props.restrictions),this.props.multiple?o=this.fileStateCopy:o=[],d.addMany(e,o),this.async.autoUpload){const n=d.groupFilesByUid(o);this.uploadFiles(d.filesForUpload(n))}const a=()=>{if(this.props.onAdd){const n={target:this,newState:o,affectedFiles:e};this.props.onAdd.call(void 0,n)}};this.isControlled?a():this.setState({files:o},a)},this.onUploadProgress=(s,e)=>{const o=Math.round(100*e.loaded/(e.total||0))||0,a=()=>{if(this.props.onProgress){const n=this.fileStateCopy,i=n.filter(h=>h.uid===s);this.setFilesProgress(n,o);const l={target:this,newState:n,affectedFiles:i};this.props.onProgress.call(void 0,l)}};this.isControlled?a():this.setState(n=>{const i=n.files,l=i.filter(h=>h.uid===s);if(this.setFilesProgress(l,o),!!l.length)return{files:i}},a)},this.onUploadSuccess=(s,e)=>{const o=this.fileStateCopy,a=o.filter(i=>i.uid===s);a.forEach(i=>{i.status=r.UploadFileStatus.Uploaded,i.progress=100}),delete this._httpSubscriptions[s];const n=()=>{if(this.props.onStatusChange){const i={target:this,newState:o,affectedFiles:a,response:e?f.convertAxiosResponse(e):void 0};this.props.onStatusChange.call(void 0,i)}};this.isControlled?n():this.setState({files:o},n)},this.onUploadError=(s,e)=>{const o=this.fileStateCopy,a=o.filter(i=>i.uid===s);if(a.forEach(i=>{i.status=r.UploadFileStatus.UploadFailed}),delete this._httpSubscriptions[s],!a.length)return;const n=()=>{if(this.props.onStatusChange){const i={target:this,newState:o,affectedFiles:a,response:e?f.convertAxiosResponse(e):void 0};this.props.onStatusChange.call(void 0,i)}};this.isControlled?n():this.setState({files:o},n)},this.onRemove=s=>{const e=this.fileStateCopy,o=e.filter(i=>i.uid===s),a=e.filter(i=>i.uid!==s);if([r.UploadFileStatus.Uploaded,r.UploadFileStatus.Initial,r.UploadFileStatus.RemoveFailed].indexOf(o[0].status)>-1){const i={[s]:o};d.setFilesStatus(i,r.UploadFileStatus.Removing),this.removeFiles(i);const l=()=>{if(this.props.onStatusChange){const h={target:this,newState:e,affectedFiles:o};this.props.onStatusChange.call(void 0,h)}};this.isControlled?l():this.setState({files:e},l)}else{const i=()=>{if(this.props.onRemove){const l={target:this,newState:a,affectedFiles:o};this.props.onRemove.call(void 0,l)}};this.isControlled?i():this.setState({files:a},i)}},this.onRemoveSuccess=(s,e)=>{const o=this.fileStateCopy,a=o.filter(l=>l.uid===s),n=o.filter(l=>l.uid!==s),i=()=>{if(this.props.onRemove){const l={target:this,newState:n,affectedFiles:a,response:e?f.convertAxiosResponse(e):void 0};this.props.onRemove.call(void 0,l)}};this.isControlled?i():this.setState({files:n},i)},this.onRemoveError=(s,e)=>{const o=this.fileStateCopy,a=o.filter(i=>i.uid===s);a.forEach(i=>{i.status=r.UploadFileStatus.RemoveFailed});const n=()=>{if(this.props.onStatusChange){const i={target:this,newState:o,affectedFiles:a,response:e?f.convertAxiosResponse(e):void 0};this.props.onStatusChange.call(void 0,i)}};this.isControlled?n():this.setState({files:o},n)},this.onRetry=s=>{const e=this.fileStateCopy,o=d.groupFilesByUid(e.filter(n=>n.uid===s));d.setFilesStatus(o,r.UploadFileStatus.Uploading),this.uploadFiles(o);const a=()=>{if(this.props.onStatusChange){const n={target:this,newState:e,affectedFiles:d.flatFileGroup(o)};this.props.onStatusChange.call(void 0,n)}};this.isControlled?a():this.setState({files:e},a)},this.onCancel=s=>{const e=this.fileStateCopy,o=e.filter(i=>i.uid!==s),a=e.filter(i=>i.uid===s);if(this._httpSubscriptions[s]&&(this._httpSubscriptions[s].cancel(),delete this._httpSubscriptions[s]),this.props.onCancel){const i={target:this,uid:s};this.props.onCancel.call(void 0,i)}const n=()=>{if(this.props.onRemove){const i={target:this,newState:o,affectedFiles:a};this.props.onRemove.call(void 0,i)}};this.isControlled?n():this.setState({files:o},n)},this.onClear=()=>{if(!this.files.length)return;Object.keys(this._httpSubscriptions).forEach(e=>{this._httpSubscriptions[e].cancel()}),this._httpSubscriptions={};const s=()=>{if(this.props.onRemove){const e={target:this,newState:[],affectedFiles:this.fileStateCopy};this.props.onRemove.call(void 0,e)}};this.isControlled?s():this.setState({files:[]},s)},this.showLicenseWatermark=!F.validatePackage(D.packageMetadata,{component:"Upload"}),this.state={files:u.defaultFiles||[]}}get async(){const{autoUpload:u,batch:s,removeField:e,removeHeaders:o,removeMethod:a,removeUrl:n,responseType:i,saveField:l,saveHeaders:h,saveMethod:v,saveUrl:c,withCredentials:p}=this.props;return{autoUpload:u,batch:s,removeField:e,removeHeaders:o,removeMethod:a,removeUrl:n,responseType:i,saveField:l,saveHeaders:h,saveMethod:v,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&&typeof this.props.saveUrl=="function"}get isCustomRemove(){return this.props.removeUrl&&typeof this.props.removeUrl=="function"}get fileStateCopy(){return this.isControlled?d.copyState(this.props.files):d.copyState(this.state.files)}get actionElement(){if(this._uploadNavigation)return this._uploadNavigation.actionElement}setFilesProgress(u,s){u.forEach(e=>{e.progress=s,e.status===r.UploadFileStatus.Uploading&&s===100&&(e.status=r.UploadFileStatus.Uploaded)})}render(){var y;const{showFileList:u,onAdd:s,onRemove:e,onCancel:o,autoUpload:a,showActionButtons:n,actionsLayout:i,tabIndex:l,disabled:h,...v}=this.props,c=d.groupFilesByUid(this.files),p=d.filesForUpload(c);return S.createElement(S.Fragment,null,S.createElement(E.UploadNavigation,{groupedFiles:c,className:this.props.className,showFileList:u&&!!Object.keys(c).length,showActionButtons:n&&!a&&(!!Object.keys(p).length||!!((y=this.props.defaultFiles)!=null&&y.length)),actionsLayout:i,autoUpload:a,disabled:h,onAdd:this.onAdd,onRemove:this.onRemove,onClear:this.onClear,onUpload:this.onUpload,onRetry:this.onRetry,onCancel:this.onCancel,tabIndex:F.getTabIndex(l,h),ref:b=>{this._uploadNavigation=b},...v}),this.showLicenseWatermark&&S.createElement(F.WatermarkOverlay,null))}};m.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},m.propTypes={autoUpload:t.bool,batch:t.bool,withCredentials:t.bool,saveField:t.string,saveHeaders:t.object,saveMethod:t.string,saveUrl:t.oneOfType([t.string,t.func]),responseType:t.oneOf(["arraybuffer","blob","json","text"]),removeField:t.string,removeHeaders:t.object,removeMethod:t.string,removeUrl:t.oneOfType([t.string,t.func]),multiple:t.bool,disabled:t.bool,showFileList:t.bool,showActionButtons:t.bool,actionsLayout:t.oneOf(["start","center","end","stretched"]),tabIndex:t.number,accept:t.string,listItemUI:t.oneOfType([t.func,t.string,t.shape({render:t.func.isRequired})]),restrictions:t.shape({allowedExtensions:t.arrayOf(t.string),maxFileSize:t.number,minFileSize:t.number}),files:t.arrayOf(t.shape({uid:t.string,name:t.string,extension:t.string,size:t.number,validationErrors:t.arrayOf(t.string),status:t.oneOf([r.UploadFileStatus.Initial,r.UploadFileStatus.RemoveFailed,r.UploadFileStatus.Removing,r.UploadFileStatus.Selected,r.UploadFileStatus.UploadFailed,r.UploadFileStatus.Uploaded,r.UploadFileStatus.Uploading]),progress:t.number,getRawFile:t.func})),defaultFiles:t.arrayOf(t.shape({uid:t.string,name:t.string,extension:t.string,size:t.number,validationErrors:t.arrayOf(t.string),status:t.oneOf([r.UploadFileStatus.Initial,r.UploadFileStatus.RemoveFailed,r.UploadFileStatus.Removing,r.UploadFileStatus.Selected,r.UploadFileStatus.UploadFailed,r.UploadFileStatus.Uploaded,r.UploadFileStatus.Uploading]),progress:t.number,getRawFile:t.func}))};let C=m;exports.Upload=C;