feat: upload thumbnails theme variant

packages/upload/src/styles/vaadin-upload-file-base-styles.js

@@ -25,6 +25,30 @@ export const uploadFileStyles = css`
     display: none;
   }
 
+  /* Hide thumbnail by default, only show with thumbnails theme */
+  [part='thumbnail'] {
+    display: none;
+    width: var(--vaadin-icon-size, 1lh);
+    height: var(--vaadin-icon-size, 1lh);
+    object-fit: cover;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  :host([theme~='thumbnails']) [part='thumbnail'] {
+    display: block;
+  }
+
+  /* Position done-icon as overlay on thumbnail */
+  :host([theme~='thumbnails']) [part='thumbnail'] ~ [part='done-icon']:not([hidden]) {
+    grid-column: 1;
+    grid-row: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.7);
+  }
+
   [part='done-icon']:not([hidden]),
   [part='warning-icon']:not([hidden]) {
     display: flex;

packages/upload/src/styles/vaadin-upload-file-list-base-styles.js

@@ -30,4 +30,19 @@ export const uploadFileListStyles = css`
     border-bottom: var(--vaadin-upload-file-list-divider-width, 1px) solid
       var(--vaadin-upload-file-list-divider-color, var(--vaadin-border-color-secondary));
   }
+
+  /* Thumbnails theme variant */
+  :host([theme~='thumbnails']) [part='list'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--vaadin-gap-s);
+  }
+
+  :host([theme~='thumbnails']) ::slotted(:first-child) {
+    margin-top: 0;
+  }
+
+  :host([theme~='thumbnails']) ::slotted(li) {
+    border-bottom: none;
+  }
 `;

packages/upload/src/vaadin-upload-file-list-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * @polymerMixin
@@ -73,6 +74,7 @@ export const UploadFileListMixin = (superClass) =>
                   .status="${file.status}"
                   .uploading="${file.uploading}"
                   .i18n="${i18n}"
+                  theme="${ifDefined(this._theme)}"
                 ></vaadin-upload-file>
               </li>
             `,

packages/upload/src/vaadin-upload-file-mixin.js

@@ -115,11 +115,20 @@ export const UploadFileMixin = (superClass) =>
         _progress: {
           type: Object,
         },
+
+        /** @private */
+        _thumbnail: {
+          type: String,
+        },
       };
     }
 
     static get observers() {
-      return ['__updateTabindex(tabindex, disabled)', '__updateProgress(_progress, progress, indeterminate)'];
+      return [
+        '__updateTabindex(tabindex, disabled)',
+        '__updateProgress(_progress, progress, indeterminate)',
+        '__updateThumbnail(file)',
+      ];
     }
 
     /** @protected */
@@ -204,4 +213,31 @@ export const UploadFileMixin = (superClass) =>
         }),
       );
     }
+
+    /** @private */
+    __updateThumbnail(file) {
+      // Abort any pending read
+      if (this.__thumbnailReader) {
+        this.__thumbnailReader.abort();
+        this.__thumbnailReader = null;
+      }
+
+      if (!file) {
+        this._thumbnail = '';
+        return;
+      }
+
+      // Check if file is an image and is an actual File/Blob object
+      if (file.type && file.type.startsWith('image/') && file instanceof Blob) {
+        const reader = new FileReader();
+        this.__thumbnailReader = reader;
+        reader.onload = (e) => {
+          this._thumbnail = e.target.result;
+          this.__thumbnailReader = null;
+        };
+        reader.readAsDataURL(file);
+      } else {
+        this._thumbnail = '';
+      }
+    }
   };

packages/upload/src/vaadin-upload-file.js

@@ -96,6 +96,8 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
   /** @protected */
   render() {
     return html`
+      ${this._thumbnail ? html`<img src="${this._thumbnail}" alt="${this.fileName}" part="thumbnail" />` : nothing}
+
       <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
       <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
 

packages/upload/src/vaadin-upload-mixin.js

@@ -354,7 +354,7 @@ export const UploadMixin = (superClass) =>
       return [
         '__updateAddButton(_addButton, maxFiles, __effectiveI18n, maxFilesReached, disabled)',
         '__updateDropLabel(_dropLabel, maxFiles, __effectiveI18n)',
-        '__updateFileList(_fileList, files, __effectiveI18n, disabled)',
+        '__updateFileList(_fileList, files, __effectiveI18n, disabled, _theme)',
         '__updateMaxFilesReached(maxFiles, files)',
       ];
     }
@@ -563,6 +563,11 @@ export const UploadMixin = (superClass) =>
         list.items = [...files];
         list.i18n = effectiveI18n;
         list.disabled = disabled;
+        if (this._theme) {
+          list.setAttribute('theme', this._theme);
+        } else {
+          list.removeAttribute('theme');
+        }
       }
     }