Feat(web): Attachment image preview object fit #DS-1005

- Now accepts cover/contain value for data-spirit-object-fit prop to
`.FileUploaderAttachment__image` element

packages/web/src/js/FileUploader.ts

@@ -265,6 +265,8 @@ class FileUploader extends BaseComponent {
     const AttachmentSvgIcon = item?.querySelector('svg');
     const AttachmentPreviewImage = snippet.querySelector('.FileUploaderAttachment__image');
     const isFileImg = file.type.includes('image');
+    const itemObjectFit = (item?.querySelector('.FileUploaderAttachment__image') as HTMLElement).dataset
+      ?.spiritObjectFit;
 
     if (hasImagePreview && isFileImg) {
       AttachmentSvgIcon?.remove();
@@ -276,6 +278,13 @@ class FileUploader extends BaseComponent {
       AttachmentPreviewImage?.remove();
     }
 
+    if (itemObjectFit) {
+      AttachmentPreviewImage?.querySelector('img')?.setAttribute(
+        'style',
+        `--file-uploader-attachment-image-object-fit: ${itemObjectFit}`,
+      );
+    }
+
     item!.appendChild(attachmentInputElement);
     item!.setAttribute('id', id);
     itemName!.appendChild(document.createTextNode(file.name));
@@ -376,13 +385,22 @@ class FileUploader extends BaseComponent {
       this.fileQueue.set(name, newValue);
 
       const itemImgElement = SelectorEngine.findOne(`#${name} .FileUploaderAttachment__image img`);
+      const itemImgWrapperElement = SelectorEngine.findOne(`#${name} .FileUploaderAttachment__image`);
+      const itemObjectFit = itemImgWrapperElement?.dataset?.spiritObjectFit;
+      let cropStyles;
+
       if (meta && itemImgElement && FileUploader.isCoordsInMeta(meta)) {
-        const cropStyles = `
+        cropStyles = `
           --file-uploader-attachment-image-top: -${meta.y}px;
           --file-uploader-attachment-image-left: -${meta.x}px;
           --file-uploader-attachment-image-width: ${meta.width}px;
-          --file-uploader-attachment-image-height: ${meta.height}px
+          --file-uploader-attachment-image-height: ${meta.height}px;
         `;
+
+        if (itemObjectFit) {
+          cropStyles += `--file-uploader-attachment-image-object-fit: ${itemObjectFit};`;
+        }
+
         itemImgElement?.setAttribute('style', cropStyles);
       }
 

packages/web/src/scss/components/FileUploader/README.md

@@ -337,10 +337,11 @@ pick up the template and apply it on any attachments the user wants to upload.
 
 ### Preview Image
 
-You can add a preview image to the FileUploaderAttachment.
+You can add a preview image and image object fit to the FileUploaderAttachment.
+Object fit is `contain` by default.
 
 ```html
-<span class="FileUploaderAttachment__image">
+<span class="FileUploaderAttachment__image" data-spirit-object-fit="contain">
   <img src="http://placekitten.com/200/300" alt="" />
 </span>
 ```
@@ -350,7 +351,7 @@ Full example:
 ```html
 <li class="FileUploaderAttachment">
   <!-- Preview image: start -->
-  <span class="FileUploaderAttachment__image">
+  <span class="FileUploaderAttachment__image" data-spirit-object-fit="contain">
     <img src="http://placekitten.com/200/300" alt="" />
   </span>
   <!-- Preview image: end -->