feat: upload thumbnails theme variant (#10607)

Author: tomivirkki

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

@@ -25,11 +25,42 @@ export const uploadFileStyles = css`
     display: none;
   }
 
+  /* Hide thumbnail and file-icon by default, only show with thumbnails theme */
+  [part='thumbnail'],
+  [part='file-icon'] {
+    display: none;
+  }
+
+  :host([theme~='thumbnails']) {
+    grid-template-columns: 3rem minmax(0, 1fr) auto;
+  }
+
+  :host([theme~='thumbnails']) [part='thumbnail']:not([hidden]),
+  :host([theme~='thumbnails']) [part='file-icon']:not([hidden]) {
+    display: block;
+    width: 3rem;
+    height: 3rem;
+    align-self: center;
+  }
+
+  [part='thumbnail'] {
+    object-fit: cover;
+  }
+
+  [part='file-icon'] {
+    background: #e0e0e0;
+  }
+
   [part='done-icon']:not([hidden]),
   [part='warning-icon']:not([hidden]) {
     display: flex;
   }
 
+  :host([theme~='thumbnails']) [part='done-icon'],
+  :host([theme~='thumbnails']) [part='warning-icon'] {
+    display: none !important;
+  }
+
   [part='done-icon']::before,
   [part='warning-icon']::before {
     content: '\\2003' / '';

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';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { UploadManager } from './vaadin-upload-manager.js';
 
@@ -81,7 +82,7 @@ export const UploadFileListMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__updateItems(items, __effectiveI18n, disabled)'];
+      return ['__updateItems(items, __effectiveI18n, disabled, _theme)'];
     }
 
     constructor() {
@@ -191,7 +192,7 @@ export const UploadFileListMixin = (superClass) =>
     }
 
     /** @private */
-    __updateItems(items, i18n) {
+    __updateItems(items, i18n, _disabled, _theme) {
       if (items && i18n) {
         // Apply i18n formatting to each file
         items.forEach((file) => this.__applyI18nToFile(file));
@@ -339,6 +340,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.d.ts

@@ -42,6 +42,8 @@ export interface UploadFileEventMap extends HTMLElementEventMap, UploadFileCusto
  *
  * Part name        | Description
  * -----------------|-------------
+ * `thumbnail`      | Image thumbnail for image files (used with `thumbnails` theme)
+ * `file-icon`      | Generic file icon for non-image files (used with `thumbnails` theme)
  * `done-icon`      | File done status icon
  * `warning-icon`   | File warning status icon
  * `meta`           | Container for file name, status and error messages

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

@@ -22,6 +22,8 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
  *
  * Part name        | Description
  * -----------------|-------------
+ * `thumbnail`      | Image thumbnail for image files (used with `thumbnails` theme)
+ * `file-icon`      | Generic file icon for non-image files (used with `thumbnails` theme)
  * `done-icon`      | File done status icon
  * `warning-icon`   | File warning status icon
  * `meta`           | Container for file name, status and error messages
@@ -99,6 +101,9 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
     const isFileRetryVisible = this.errorMessage;
 
     return html`
+      <img src="${this.__thumbnail}" alt="${this.fileName}" part="thumbnail" ?hidden="${!this.__thumbnail}" />
+      <div part="file-icon" ?hidden="${!!this.__thumbnail}" aria-hidden="true"></div>
+
       <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

@@ -381,7 +381,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)',
       ];
     }
@@ -590,6 +590,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');
+        }
       }
     }
 

packages/upload/test/dom/__snapshots__/vaadin-upload-file.test.snap.js

@@ -2,7 +2,18 @@
 export const snapshots = {};
 
 snapshots["vaadin-upload-file shadow default"] = 
-`<div
+`<img
+  alt="Workflow.pdf"
+  hidden=""
+  part="thumbnail"
+  src=""
+>
+<div
+  aria-hidden="true"
+  part="file-icon"
+>
+</div>
+<div
   aria-hidden="true"
   hidden=""
   part="done-icon"

packages/upload/test/upload-file-list.test.ts

@@ -523,4 +523,57 @@ describe('vaadin-upload-file-list', () => {
       expect(getUploadFiles().length).to.equal(3);
     });
   });
+
+  describe('theme propagation', () => {
+    it('should propagate theme to upload-file elements', async () => {
+      fileList.setAttribute('theme', 'thumbnails');
+      manager.addFiles([createFile(100, 'text/plain')]);
+      fileList.manager = manager;
+      await nextFrame();
+
+      const uploadFile = getUploadFile();
+      expect(uploadFile.getAttribute('theme')).to.equal('thumbnails');
+    });
+
+    it('should propagate theme to multiple upload-file elements', async () => {
+      fileList.setAttribute('theme', 'thumbnails');
+      manager.addFiles(createFiles(3, 100, 'text/plain'));
+      fileList.manager = manager;
+      await nextFrame();
+
+      const uploadFiles = getUploadFiles();
+      uploadFiles.forEach((file) => {
+        expect(file.getAttribute('theme')).to.equal('thumbnails');
+      });
+    });
+
+    it('should update upload-file elements when theme changes', async () => {
+      manager.addFiles([createFile(100, 'text/plain')]);
+      fileList.manager = manager;
+      await nextFrame();
+
+      const uploadFile = getUploadFile();
+      expect(uploadFile.getAttribute('theme')).to.be.null;
+
+      fileList.setAttribute('theme', 'thumbnails');
+      await nextFrame();
+
+      expect(uploadFile.getAttribute('theme')).to.equal('thumbnails');
+    });
+
+    it('should remove theme from upload-file elements when theme is removed', async () => {
+      fileList.setAttribute('theme', 'thumbnails');
+      manager.addFiles([createFile(100, 'text/plain')]);
+      fileList.manager = manager;
+      await nextFrame();
+
+      const uploadFile = getUploadFile();
+      expect(uploadFile.getAttribute('theme')).to.equal('thumbnails');
+
+      fileList.removeAttribute('theme');
+      await nextFrame();
+
+      expect(uploadFile.getAttribute('theme')).to.be.null;
+    });
+  });
 });

packages/upload/test/upload.test.js

@@ -690,4 +690,32 @@ describe('upload', () => {
       upload._queueFileUpload(file);
     });
   });
+
+  describe('theme', () => {
+    it('should propagate theme to file list', async () => {
+      upload.setAttribute('theme', 'thumbnails');
+      await nextUpdate(upload);
+      expect(upload._fileList.getAttribute('theme')).to.equal('thumbnails');
+    });
+
+    it('should update file list theme when theme changes', async () => {
+      upload.setAttribute('theme', 'thumbnails');
+      await nextUpdate(upload);
+      expect(upload._fileList.getAttribute('theme')).to.equal('thumbnails');
+
+      upload.setAttribute('theme', 'other');
+      await nextUpdate(upload);
+      expect(upload._fileList.getAttribute('theme')).to.equal('other');
+    });
+
+    it('should remove file list theme when theme is removed', async () => {
+      upload.setAttribute('theme', 'thumbnails');
+      await nextUpdate(upload);
+      expect(upload._fileList.getAttribute('theme')).to.equal('thumbnails');
+
+      upload.removeAttribute('theme');
+      await nextUpdate(upload);
+      expect(upload._fileList.getAttribute('theme')).to.be.null;
+    });
+  });
 });