diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 99b572f6ce..b430e9571e 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -25096,6 +25096,14 @@ "default": "50", "description": "Width of the image thumbnail in pixels." }, + { + "name": "filenameTruncateLength", + "optional": true, + "readonly": false, + "type": "number", + "default": "40", + "description": "Length of the maximum file name characters that can be displayed." + }, { "name": "progressBarTemplate", "optional": true, diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js index 4bcbe48c07..4728b19f16 100644 --- a/components/lib/fileupload/FileUpload.js +++ b/components/lib/fileupload/FileUpload.js @@ -12,6 +12,7 @@ import { ProgressBar } from '../progressbar/ProgressBar'; import { Ripple } from '../ripple/Ripple'; import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils'; import { FileUploadBase } from './FileUploadBase'; +import { Tooltip } from '../tooltip/Tooltip'; export const FileUpload = React.memo( React.forwardRef((inProps, ref) => { @@ -41,6 +42,7 @@ export const FileUpload = React.memo( const fileInputRef = React.useRef(null); const messagesRef = React.useRef(null); const contentRef = React.useRef(null); + const fileNameRef = React.useRef(null); const uploadedFileCount = React.useRef(0); const hasFiles = ObjectUtils.isNotEmpty(filesState); const hasUploadedFiles = ObjectUtils.isNotEmpty(uploadedFilesState); @@ -423,6 +425,12 @@ export const FileUpload = React.memo( } }; + const truncateFilename = (filename) => { + const maxLength = props.filenameTruncateLength; + + return filename.length > maxLength ? `${filename.substring(0, maxLength / 2)}...${filename.substring(filename.length - maxLength / 2)}` : filename; + }; + const createFile = (file, index, badgeOptions) => { const key = file.name + file.type + file.size; const thumbnailProps = mergeProps( @@ -439,19 +447,27 @@ export const FileUpload = React.memo( const fileSizeProps = mergeProps(ptm('fileSize')); const fileNameProps = mergeProps( { - className: cx('fileName') + className: cx('fileName'), + ref: fileNameRef, + style: { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + maxWidth: '100%' + } }, ptm('fileName') ); const actionsProps = mergeProps(ptm('actions')); - const fileName =