diff --git a/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx b/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
index 919150aa41..f69312c869 100644
--- a/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
+++ b/packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx
@@ -7,21 +7,29 @@ type AttachmentImagePreviewProps = {
imagePreview: string;
label: string;
meta?: FileMetadata;
+ objectFit?: 'contain' | 'cover';
};
-const AttachmentImagePreview = ({ label, imagePreview, meta }: AttachmentImagePreviewProps) => {
- const { classProps } = useFileUploaderStyleProps({ meta });
- const { imageCropStyles } = classProps;
+const AttachmentImagePreview = ({ label, imagePreview, meta, objectFit }: AttachmentImagePreviewProps) => {
+ const { classProps } = useFileUploaderStyleProps({ meta, objectFit });
+ const { imageCropStyles, attachmentStyles } = classProps;
return (
-
+
);
};
AttachmentImagePreview.defaultProps = {
meta: undefined,
+ objectFit: 'contain',
};
export default AttachmentImagePreview;
diff --git a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
index 4996905982..faeaaea671 100644
--- a/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
+++ b/packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx
@@ -23,12 +23,13 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
iconName = DEFAULT_ICON_NAME,
id,
label,
+ meta,
name,
+ objectFit,
onDismiss,
onEdit,
onError,
removeText,
- meta,
...restProps
} = props;
const [imagePreview, setImagePreview] = useState('');
@@ -83,7 +84,7 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
className={classNames(classProps.attachment.root, styleProps.className)}
>
{hasImagePreview && imagePreview ? (
-
+
) : (
)}
diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md
index 701689d1cb..c10865a85e 100644
--- a/packages/web-react/src/components/FileUploader/README.md
+++ b/packages/web-react/src/components/FileUploader/README.md
@@ -422,6 +422,7 @@ The rest of the properties are created from the default `` element. [More ab
| `onDismiss` | `(key: string) => FileQueueMapType` | — | ✔ | Callback to delete an item from the queue |
| `onEdit` | `(event: Event, file: File) => void` | — | ✕ | Show and add function to edit button |
| `onError` | `FileUploaderErrorCallbackType` | — | ✕ | Callback on error condition |
+| `objectFit` | [`cover` \| `contain`] | `cover` | ✕ | CSS value for image preview in FileUploaderAttachment |
| `removeText` | `string` | `Remove` | ✕ | Dismiss button label |
| `UNSAFE_className` | `string` | — | ✕ | FileUploaderAttachment custom class name |
| `UNSAFE_style` | `CSSProperties` | — | ✕ | FileUploaderAttachment custom style |
diff --git a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts
index a38dbdd10a..d578acae15 100644
--- a/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts
+++ b/packages/web-react/src/components/FileUploader/useFileUploaderStyleProps.ts
@@ -5,15 +5,16 @@ import { useClassNamePrefix } from '../../hooks';
import { FileMetadata, FileUploaderQueueLimitBehaviorType, Validation } from '../../types';
export interface FileUploaderStyleProps extends Validation {
- isDragAndDropSupported?: boolean;
- isLabelHidden?: boolean;
isDisabled?: boolean;
isDisabledByQueueLimitBehavior?: boolean;
+ isDragAndDropSupported?: boolean;
isDragging?: boolean;
isDropZoneHidden?: boolean;
isFluid?: boolean;
- queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
+ isLabelHidden?: boolean;
meta?: FileMetadata;
+ objectFit?: 'contain' | 'cover';
+ queueLimitBehavior?: FileUploaderQueueLimitBehaviorType;
}
type ImageCropCSS = {
@@ -23,6 +24,10 @@ type ImageCropCSS = {
[FileUploaderCropCSS.HEIGHT]?: string;
} & CSSProperties;
+type ImageObjectFit = {
+ '--file-uploader-attachment-image-object-fit': string;
+};
+
export interface FileUploaderStyleReturn {
/** className props */
classProps: {
@@ -49,6 +54,7 @@ export interface FileUploaderStyleReturn {
slot: string;
};
imageCropStyles?: ImageCropCSS;
+ attachmentStyles?: ImageObjectFit;
};
}
@@ -79,8 +85,9 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
const fileUploaderAttachmentImageClass = `${fileUploaderAttachmentClass}__image`;
const fileUploaderAttachmentSlotClass = `${fileUploaderAttachmentClass}__slot`;
- const { meta } = props || {};
+ const { meta, objectFit } = props || {};
let imageCropCSS: ImageCropCSS | undefined;
+ let imageObjectFitCSS: ImageObjectFit | undefined;
const hasCoords = meta && meta.x != null && meta.y != null && meta.width != null && meta.height != null;
if (hasCoords) {
@@ -94,6 +101,12 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
};
}
+ if (objectFit) {
+ imageObjectFitCSS = {
+ '--file-uploader-attachment-image-object-fit': objectFit,
+ };
+ }
+
return {
classProps: {
root: classNames(fileUploaderClass, { [fileUploaderFluidClass]: props?.isFluid }),
@@ -129,6 +142,7 @@ export const useFileUploaderStyleProps = (props?: FileUploaderStyleProps): FileU
slot: fileUploaderAttachmentSlotClass,
},
...(hasCoords && { imageCropStyles: imageCropCSS }),
+ ...(objectFit && { attachmentStyles: imageObjectFitCSS }),
},
};
};
diff --git a/packages/web-react/src/types/fileUploader.ts b/packages/web-react/src/types/fileUploader.ts
index dc6ef170f1..7aa1527a26 100644
--- a/packages/web-react/src/types/fileUploader.ts
+++ b/packages/web-react/src/types/fileUploader.ts
@@ -100,6 +100,7 @@ export interface FileUploaderAttachmentBaseProps extends Omit void) => FileQueueMapType;
onEdit?: (event: MouseEvent, file: File) => void;
onError?: FileUploaderErrorCallbackType;