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