@progress/kendo-react-upload/UploadListMultiItem.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"),g=require("@progress/kendo-react-common"),h=require("@progress/kendo-react-progressbars"),l=require("./utils/utils.js"),m=require("@progress/kendo-react-intl"),a=require("./messages/index.js"),S=require("./UploadListActionButton.js"),F=require("@progress/kendo-svg-icons");function M(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(e,s,i.get?i:{enumerable:!0,get:()=>n[s]})}}return e.default=n,Object.freeze(e)}const t=M(E);class u extends t.Component{constructor(){super(...arguments),this.mapFiles=()=>{const{files:e}=this.props;return e.map(s=>t.createElement("span",{key:s.name,className:"k-file-info"},t.createElement("span",{className:"k-file-name",title:s.name},s.name),l.fileHasValidationErrors(s)?t.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},this.getFileValidationMessage(s)):t.createElement("span",{key:`${s.name}-size`,className:"k-file-size"},l.getTotalFilesSizeMessage([s]))))},this.progress=()=>{const{files:e}=this.props;let s=0;return e.forEach(i=>{s+=i.progress||0}),s/e.length}}getFileValidationMessage(e){const s=m.provideLocalizationService(this);let i="";if(e.validationErrors&&e.validationErrors.length>0){const o=`upload.${e.validationErrors[0]}`;i=s.toLanguageString(o,a.messages[o])}return i}render(){const{files:e,...s}=this.props,[,i,o,p]=l.getFileStatus(e),r=m.provideLocalizationService(this),d=r.toLanguageString(a.total,a.messages[a.total]),f=r.toLanguageString(a.files,a.messages[a.files]),k=r.toLanguageString(a.statusUploadFailed,a.messages[a.statusUploadFailed]),v=r.toLanguageString(a.statusUploaded,a.messages[a.statusUploaded]),c=this.progress();return t.createElement("div",{className:g.classNames("k-file-multiple")},!p&&!i&&!o&&t.createElement(h.ProgressBar,{value:c||0}),t.createElement("span",{className:"k-file-icon-wrapper"},t.createElement(g.IconWrap,{className:"k-file-icon",name:"copy",icon:F.copyIcon,size:"xxlarge"})),t.createElement("span",{className:"k-multiple-files-wrapper"},this.mapFiles(),o?t.createElement("span",{className:"k-file-validation-message","aria-live":"polite"},`${e.length} ${k}`):c!==100?t.createElement("span",{className:"k-file-summary"},`${d}: ${e.length} ${f}, ${l.getTotalFilesSizeMessage(e)}`):t.createElement("span",{className:"k-file-summary k-text-success"},`${e.length} ${v}`)),t.createElement(S.UploadListActionButton,{uid:e[0].uid,status:e[0].status,progress:c,...s}))}}m.registerForLocalization(u);exports.UploadListMultiItem=u;