Fix #5664: FileUpload progress template (#5665)

primefaces · Jan 4, 2024 · 1277ce4 · 1277ce4
1 parent 4c9f9bd
commit 1277ce4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
@@ -292,8 +292,7 @@ export const FileUpload = React.memo(
         };
 
         const onKeyDown = (event) => {
-            if (event.which === 13) {
-                // enter
+            if (event.code === 'Enter') {
                 choose();
             }
         };
@@ -530,7 +529,12 @@ export const FileUpload = React.memo(
 
         const createProgressBarContent = () => {
             if (props.progressBarTemplate) {
-                return ObjectUtils.getJSXElement(props.progressBarTemplate, props);
+                const defaultProgressBarTemplateOptions = {
+                    progress: progressState,
+                    props
+                };
+
+                return ObjectUtils.getJSXElement(props.progressBarTemplate, defaultProgressBarTemplateOptions);
             }
 
             return <ProgressBar value={progressState} showValue={false} pt={ptm('progressbar')} __parentMetadata={{ parent: metaData }} />;

diff --git a/components/lib/fileupload/fileupload.d.ts b/components/lib/fileupload/fileupload.d.ts
@@ -218,6 +218,22 @@ interface FileUploadHeaderTemplateOptions {
     props: FileUploadProps;
 }
 
+/**
+ * Custom file upload progressbar template options
+ */
+interface FileUploadProgressBarTemplateOptions {
+    /**
+     * Current progress state as a number.
+     * @defaultValue 0
+     */
+    progress: number;
+    /**
+     * The props passed to the component.
+     * @type {FileUploadProps}
+     */
+    props: FileUploadProps;
+}
+
 /**
  * Custom item template options
  */
@@ -532,7 +548,7 @@ interface FileUploadProps {
     /**
      * Custom template of progressBar content in the container.
      */
-    progressBarTemplate?: React.ReactNode | ((props: FileUploadProps) => React.ReactNode);
+    progressBarTemplate?: React.ReactNode | ((options: FileUploadProgressBarTemplateOptions) => React.ReactNode);
     /**
      * Callback to invoke before file upload begins to customize the request such as post parameters before the files.
      * @param {FileUploadBeforeUploadEvent} event - Custom beforeUpload.