diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
index 53950823d7..cddb7af716 100644
--- a/components/lib/fileupload/FileUpload.js
+++ b/components/lib/fileupload/FileUpload.js
@@ -7,6 +7,9 @@ import { Ripple } from '../ripple/Ripple';
import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
import { FileUploadBase } from './FileUploadBase';
import { Badge } from '../badge/Badge';
+import { PlusIcon } from '../icon/plus';
+import { UploadIcon } from '../icon/upload';
+import { TimesIcon } from '../icon/times';
export const FileUpload = React.memo(
React.forwardRef((inProps, ref) => {
@@ -369,14 +372,16 @@ export const FileUpload = React.memo(
className
);
const labelClassName = 'p-button-label p-clickable';
+ const iconClassName = classNames('p-button-icon p-clickable', { "p-button-icon-left": !iconOnly });
const label = iconOnly ? : {chooseButtonLabel};
const input = ;
- const icon = IconUtils.getJSXIcon(_icon || 'pi pi-fw pi-plus', { className: 'p-button-icon p-button-icon-left p-clickable' }, { props });
+ const icon = _icon || ;
+ const chooseIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
return (
{input}
- {icon}
+ {chooseIcon}
{label}
@@ -403,7 +408,7 @@ export const FileUpload = React.memo(
);
const removeButton = (
-
);
let content = (
@@ -483,9 +488,13 @@ export const FileUpload = React.memo(
const cancelOptions = props.cancelOptions;
const uploadLabel = !uploadOptions.iconOnly ? uploadButtonLabel : '';
const cancelLabel = !cancelOptions.iconOnly ? cancelButtonLabel : '';
+ const uploadIconClassName = classNames('p-button-icon p-c', { "p-button-icon-left": !uploadOptions.iconOnly })
+ const uploadIcon = IconUtils.getJSXIcon(uploadOptions.icon || , { className: uploadIconClassName }, { props });
+ const cancelIconClassName = classNames('p-button-icon p-c', { "p-button-icon-left": !cancelOptions.iconOnly })
+ const cancelIcon = IconUtils.getJSXIcon(cancelOptions.icon || , { className: cancelIconClassName }, { props });
- uploadButton = ;
- cancelButton = ;
+ uploadButton = ;
+ cancelButton = ;
}
if (hasFiles) {
@@ -537,18 +546,19 @@ export const FileUpload = React.memo(
const otherProps = FileUploadBase.getOtherProps(props);
const className = classNames('p-fileupload p-fileupload-basic p-component', props.className);
const buttonClassName = classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': disabled, 'p-focus': focusedState }, chooseOptions.className);
- const chooseIcon = chooseOptions.icon || classNames({ 'pi pi-plus': !chooseOptions.icon && (!hasFiles || props.auto), 'pi pi-upload': !chooseOptions.icon && hasFiles && !props.auto });
+ const iconClassName = classNames('p-button-icon', { "p-button-icon-left": !chooseOptions.iconOnly });
+ const icon = chooseOptions.icon ? chooseOptions.icon : (!chooseOptions.icon && (!hasFiles || props.auto)) ? : !chooseOptions.icon && hasFiles && !props.auto && ;
const labelClassName = 'p-button-label p-clickable';
const chooseLabel = chooseOptions.iconOnly ? : {chooseButtonLabel};
const label = props.auto ? chooseLabel : {hasFiles ? filesState[0].name : chooseLabel};
- const icon = IconUtils.getJSXIcon(chooseIcon, { className: 'p-button-icon p-button-icon-left' }, { props, hasFiles });
+ const chooseIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props, hasFiles });
const input = !hasFiles && ;
return (
- {icon}
+ {chooseIcon}
{label}
{input}
diff --git a/components/lib/fileupload/FileUploadBase.js b/components/lib/fileupload/FileUploadBase.js
index c960f8cab3..8e76cc1b04 100644
--- a/components/lib/fileupload/FileUploadBase.js
+++ b/components/lib/fileupload/FileUploadBase.js
@@ -9,6 +9,7 @@ export const FileUploadBase = {
mode: 'advanced',
multiple: false,
accept: null,
+ removeIcon: null,
disabled: false,
auto: false,
maxFileSize: null,
diff --git a/components/lib/fileupload/fileupload.d.ts b/components/lib/fileupload/fileupload.d.ts
index a29461a878..6c2bd1bd04 100644
--- a/components/lib/fileupload/fileupload.d.ts
+++ b/components/lib/fileupload/fileupload.d.ts
@@ -275,6 +275,10 @@ interface FileUploadProps {
* @defaultValue false
*/
accept?: string | undefined;
+ /**
+ * Icon of the remove element.
+ */
+ removeIcon?: IconType | undefined;
/**
* Disables the upload functionality.
* @defaultValue false