[Feature]: Add fileUploadPreview to Umbraco

[iOvergaard]

Feature summary

Would you consider adding a "fileUploadPreview" extension to Umbraco?

I could potentially do a pull request for it, but I'm not sure whether you'd like an Umbraco-targeted RCL that people had to install, since this package seems to be more targeted as a middleware in between your ASP.NET software (Umbraco, etc) and ImageSharp.

Additional details

The files I toyed around with are here for posterity.

Add /App_Plugins/ImageSharpCommunity.Formats.Pdf/umbraco-package.json:

{
  "$schema": "../../umbraco-package-schema.json",
  "name": "ImageSharp Community PDF Format Provider",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "fileUploadPreview",
      "alias": "ImageSharpCommunity.FileUploadPreview.Pdf",
      "name": "PDF File Upload Preview",
      "weight": 200,
      "js": "/App_Plugins/ImageSharpCommunity.Formats.Pdf/pdf-preview.element.js",
      "forMimeTypes": ["application/pdf"]
    }
  ]
}

Add /App_Plugins/ImageSharpCommunity.Formats.Pdf/pdf-preview.element.js:

import { html, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

export default class ImageSharpPdfPreviewElement extends UmbLitElement {
    static properties = {
        path: { type: String },
    };

    constructor() {
        super();
        this.path = '';
    }

    render() {
        if (!this.path) return html`<uui-loader></uui-loader>`;

        const label = this.path.split('/').pop() ?? '';

        // Add resize parameters and explicitly request WebP format for PDF conversion
        const previewPath = this.path.includes('?')
            ? `${this.path}&width=400&height=400&format=webp`
            : `${this.path}?width=400&height=400&format=webp`;

        return html`<img src=${previewPath} alt=${label} loading="lazy" />`;
    }

    static styles = [
        css`
            :host {
                position: relative;
                min-height: 240px;
                max-height: 400px;
                width: fit-content;
                max-width: 100%;
            }

            img {
                object-fit: contain;
                width: auto;
                height: 100%;
                background-color: #fff;
                background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
                background-repeat: repeat;
                background-size: 10px 10px;
            }
        `,
    ];
}

These two files will replace the default "PDF Icon" previewer with an actual image of the PDF in the details view of Umbraco.

P.S. Umbraco should be able to support thumbnails for PDF files in the media grid view at some point: umbraco/Umbraco-CMS#21570

[skttl]

Awesome - It will have to be a seperate "made for Umbraco" package, though. I'll look into it later!