From 42f24133ac6853f55a77edfc85f79cd729eef833 Mon Sep 17 00:00:00 2001
From: akshayantony55 <akshayantony55@gmail.com>
Date: Thu, 24 Apr 2025 17:37:10 +0530
Subject: [PATCH] fix: #7935, FileUpload: Uploaded file name is not trimmed
 when files with larger filenames are uploaded.

---
 components/doc/common/apidoc/index.json     |  8 +++++
 components/lib/fileupload/FileUpload.js     | 37 ++++++++++++++++++---
 components/lib/fileupload/FileUploadBase.js |  1 +
 components/lib/fileupload/fileupload.d.ts   |  5 +++
 4 files changed, 46 insertions(+), 5 deletions(-)

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 = <div {...fileNameProps}>{file.name}</div>;
+            const fileName = <div {...fileNameProps}>{truncateFilename(file.name)}</div>;
             const size = <div {...fileSizeProps}>{formatSize(file.size)}</div>;
 
             const contentBody = (
                 <div {...detailsProps}>
-                    <div {...fileNameProps}> {file.name}</div>
+                    <div {...fileNameProps}> {truncateFilename(file.name)}</div>
                     <span {...fileSizeProps}>{formatSize(file.size)}</span>
                     <Badge className="p-fileupload-file-badge" value={badgeOptions.value} severity={badgeOptions.severity} pt={ptm('badge')} __parentMetadata={{ parent: metaData }} />
+                    <Tooltip target={fileNameRef} content={file.name} pt={ptm('tooltip')} />
                 </div>
             );
             const removeButton = (
@@ -685,12 +701,22 @@ export const FileUpload = React.memo(
             const chooseOptions = props.chooseOptions;
             const labelProps = mergeProps(
                 {
-                    className: cx('label')
+                    className: cx('label'),
+                    ref: fileNameRef,
+                    style: hasFiles
+                        ? {
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                              maxWidth: '100%'
+                          }
+                        : undefined
                 },
                 ptm('label')
             );
             const chooseLabel = chooseOptions.iconOnly ? <span {...labelProps} dangerouslySetInnerHTML={{ __html: '&nbsp;' }} /> : <span {...labelProps}>{chooseButtonLabel}</span>;
-            const label = props.auto ? chooseLabel : <span {...labelProps}>{hasFiles ? props.selectedFileLabel || filesState[0].name : chooseLabel}</span>;
+            const label = props.auto ? chooseLabel : <span {...labelProps}>{hasFiles ? truncateFilename(props.selectedFileLabel || filesState[0].name) : chooseLabel}</span>;
+            const tooltip = hasFiles ? <Tooltip target={fileNameRef} content={filesState[0].name} pt={ptm('tooltip')} /> : null;
             const chooseIconProps = mergeProps(
                 {
                     className: cx('chooseIcon', { iconOnly: chooseOptions.iconOnly })
@@ -741,6 +767,7 @@ export const FileUpload = React.memo(
                         {chooseIcon}
                         {label}
                         {input}
+                        {tooltip}
                         <Ripple />
                     </span>
                 </div>
diff --git a/components/lib/fileupload/FileUploadBase.js b/components/lib/fileupload/FileUploadBase.js
index 800c902691..33286b583d 100644
--- a/components/lib/fileupload/FileUploadBase.js
+++ b/components/lib/fileupload/FileUploadBase.js
@@ -104,6 +104,7 @@ export const FileUploadBase = ComponentBase.extend({
         className: null,
         withCredentials: false,
         previewWidth: 50,
+        filenameTruncateLength: 40,
         chooseLabel: null,
         selectedFileLabel: null,
         uploadLabel: null,
diff --git a/components/lib/fileupload/fileupload.d.ts b/components/lib/fileupload/fileupload.d.ts
index 9c7e5b44cd..ca1b83fbc3 100644
--- a/components/lib/fileupload/fileupload.d.ts
+++ b/components/lib/fileupload/fileupload.d.ts
@@ -497,6 +497,11 @@ interface FileUploadProps {
      * @defaultValue 50
      */
     previewWidth?: number | undefined;
+    /**
+     * Length of the maximum file name characters that can be displayed.
+     * @defaultValue 40
+     */
+    filenameTruncateLength?: number | undefined;
     /**
      * Label of the choose button. Defaults to global value in Locale configuration.
      */