@progress/kendo-react-upload
Version:
React Upload component helps users transfer files from their file systems to dedicated server handlers. KendoReact Upload package
114 lines (113 loc) • 4.65 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as a from "react";
import { classNames as g, IconWrap as d } from "@progress/kendo-react-common";
import { ProgressBar as u } from "@progress/kendo-react-progressbars";
import { provideLocalizationService as l, registerForLocalization as v } from "@progress/kendo-react-intl";
import { statusUploadFailed as c, messages as r, statusUploaded as m } from "./messages/index.mjs";
import p from "./utils/utils.mjs";
import { UploadListActionButton as E } from "./UploadListActionButton.mjs";
import { fileIcon as x, fileWordIcon as I, fileZipIcon as k, fileConfigIcon as F, fileProgrammingIcon as h, fileDataIcon as N, filePresentationIcon as z, filePdfIcon as S, fileTxtIcon as L, fileVideoIcon as U, fileAudioIcon as w, fileImageIcon as V } from "@progress/kendo-svg-icons";
class M extends a.Component {
/**
* @hidden
*/
getFileExtension(e) {
return e.extension ? e.extension.substring(1) : "";
}
/**
* @hidden
*/
getFileValidationMessage(e, i) {
const s = l(this);
let n = "";
if (i)
n = s.toLanguageString(c, r[c]);
else if (e.validationErrors && e.validationErrors.length > 0) {
const t = `upload.${e.validationErrors[0]}`;
n = s.toLanguageString(t, r[t]);
}
return n;
}
/**
* @hidden
*/
getFileExtensionIcon(e) {
switch (e.extension) {
case ".png":
case ".jpg":
case ".jpeg":
case ".tiff":
case ".bmp":
case ".gif":
return { name: "file-image", icon: V };
case ".mp3":
case ".mp4":
case ".wav":
return { name: "file-audio", icon: w };
case ".mkv":
case ".webm":
case ".flv":
case ".gifv":
case ".avi":
case ".wmv":
return { name: "file-video", icon: U };
case ".txt":
return { name: "file-txt", icon: L };
case ".pdf":
return { name: "file-pdf", icon: S };
case ".ppt":
case ".pptx":
return { name: "file-presentation", icon: z };
case ".csv":
case ".xls":
case ".xlsx":
return { name: "file-data", icon: N };
case ".html":
case ".css":
case ".js":
case ".ts":
return { name: "file-programming", icon: h };
case ".exe":
return { name: "file-config", icon: F };
case ".zip":
case ".rar":
return { name: "file-zip", icon: k };
case ".doc":
case ".docm":
case ".docx":
return { name: "file-zip", icon: I };
default:
return { name: "file", icon: x };
}
}
/**
* @hidden
*/
renderValidationError(e, i) {
return /* @__PURE__ */ a.createElement("span", { className: "k-file-info", key: "2" }, /* @__PURE__ */ a.createElement("span", { className: "k-file-name", title: e.name }, e.name), /* @__PURE__ */ a.createElement("span", { className: "k-file-validation-message", "aria-live": "polite" }, this.getFileValidationMessage(e, i)));
}
/**
* @hidden
*/
renderFileDetails(e) {
const s = l(this).toLanguageString(m, r[m]);
return /* @__PURE__ */ a.createElement("span", { className: "k-file-info", key: "2" }, /* @__PURE__ */ a.createElement("span", { className: "k-file-name", title: e.name }, e.name), e.progress !== 100 ? /* @__PURE__ */ a.createElement("span", { className: "k-file-size" }, p.getTotalFilesSizeMessage([e])) : /* @__PURE__ */ a.createElement("span", { className: "k-file-validation-message", "aria-live": "polite" }, s));
}
/**
* @hidden
*/
render() {
const { files: e, ...i } = this.props, s = e[0], [, n, t, o] = p.getFileStatus([s]), f = !o && !n && !t;
return /* @__PURE__ */ a.createElement("div", { className: g("k-file-single") }, f && /* @__PURE__ */ a.createElement(u, { value: s.progress || 0, tabIndex: -1 }), /* @__PURE__ */ a.createElement("span", { className: "k-file-icon-wrapper", key: "1" }, /* @__PURE__ */ a.createElement(d, { className: "k-file-icon", ...this.getFileExtensionIcon(s), size: "xxlarge" }), /* @__PURE__ */ a.createElement("span", { className: "k-file-state" })), o || t ? this.renderValidationError(s, t) : this.renderFileDetails(s), /* @__PURE__ */ a.createElement(E, { uid: s.uid, status: s.status, progress: s.progress, ...i }));
}
}
v(M);
export {
M as UploadListSingleItem
};