added placeholder image icon to file thumbnail symbol

Author: JesmoDev

packages/uui-file-preview/lib/uui-file-preview.element.ts

@@ -140,6 +140,9 @@ export class UUIFilePreviewElement extends LitElement {
   @state()
   private _file?: File;
 
+  @state()
+  private _isImage?: boolean;
+
   @property({ attribute: false })
   public get file() {
     return this._file;
@@ -154,6 +157,7 @@ export class UUIFilePreviewElement extends LitElement {
       this._size = newValue.size;
 
       if (this._isFileAnImage(newValue)) {
+        this._isImage = true;
         this._getThumbnail(newValue).then(result => {
           this._src = result;
         });
@@ -179,7 +183,7 @@ export class UUIFilePreviewElement extends LitElement {
     if (this._isDirectory) {
       return html`<uui-symbol-folder id="file-symbol"></uui-symbol-folder>`;
     }
-    if (this._src) {
+    if (this._isImage) {
       return html`<uui-symbol-file-thumbnail
         .src=${this._src}
         .alt=${this._name}

packages/uui-input-file/lib/uui-input-file.element.ts

@@ -38,6 +38,7 @@ export class UUIInputFileElement extends FormControlMixin(LitElement) {
         justify-items: center;
         width: 100%;
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        grid-auto-rows: min-content;
         gap: 16px;
         padding: 16px;
         overflow: auto;

packages/uui-symbol-file-thumbnail/lib/uui-symbol-file-thumbnail.element.ts

@@ -1,7 +1,10 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
+import { iconPicture } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+
 /**
  * @element uui-symbol-file-thumbnail
  * @description - Symbol to display a thumbnail.
@@ -21,6 +24,17 @@ export class UUISymbolFileThumbnailElement extends LitElement {
         height: 100%;
         width: 100%;
       }
+
+      uui-icon {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        display: flex;
+        max-height: 100%;
+        justify-content: center;
+        color: var(--uui-color-white);
+        background: var(--uui-color-white-dimmed);
+      }
     `,
   ];
 
@@ -42,8 +56,19 @@ export class UUISymbolFileThumbnailElement extends LitElement {
   @property({ type: String })
   alt: string = '';
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.setAttribute('role', 'img');
+
+    demandCustomElement(this, 'uui-icon');
+  }
+
   render() {
-    return html`<img src=${this.src} alt=${this.alt} />`;
+    return this.src
+      ? html`<img src=${this.src} alt=${this.alt} />`
+      : html`<uui-icon
+          name="picture"
+          .fallback=${iconPicture.strings[0]}></uui-icon>`;
   }
 }