umbraco-file-upload-preview

Umbraco 文件上传预览

这是什么？

文件上传预览是自定义 Web 组件，可在 Umbraco 中上传文件时为特定文件类型呈现预览。你可以根据文件的 MIME 类型创建文件的可视化表示，例如显示图片缩略图、音频波形，或特定文件格式的自定义图标。

文档

实施前始终获取最新文档：

• 基础：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• 扩展注册表：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
• Umbraco Element：https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation/umbraco-element

相关基础技能

• Umbraco Element：用于创建 UI 组件的基类
  • 参考技能：umbraco-umbraco-element

工作流

1. 获取文档 - 对上述 URL 使用 WebFetch
2. 提问 - 需要支持哪些 MIME 类型？预览如何显示？
3. 生成文件 - 根据最新文档创建清单和元素
4. 说明 - 展示创建了什么以及如何测试

最简示例

清单（manifests.ts）

export const manifests: Array<UmbExtensionManifest> = [
  {
    type: 'fileUploadPreview',
    alias: 'My.FileUploadPreview.Custom',
    name: 'Custom File Upload Preview',
    weight: 100,
    element: () => import('./my-file-preview.element.js'),
    forMimeTypes: ['application/pdf', 'application/x-pdf'],
  },
];

元素实现（my-file-preview.element.ts）

import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbFileUploadPreviewElement } from '@umbraco-cms/backoffice/media';

@customElement('my-file-preview')
export class MyFilePreviewElement extends UmbLitElement implements UmbFileUploadPreviewElement {
  @property({ type: Object })
  file?: File;

  @state()
  private _previewUrl?: string;

  override updated(changedProperties: Map<string, unknown>) {
    if (changedProperties.has('file') && this.file) {
      this._previewUrl = URL.createObjectURL(this.file);
    }
  }

  override disconnectedCallback() {
    super.disconnectedCallback();
    if (this._previewUrl) {
      URL.revokeObjectURL(this._previewUrl);
    }
  }

  override render() {
    if (!this.file) return html``;

    return html`
      <div class="preview-container">
        <uui-icon name="icon-document"></uui-icon>
        <span>${this.file.name}</span>
      </div>
    `;
  }
}

export default MyFilePreviewElement;

接口参考

interface ManifestFileUploadPreview extends ManifestElement<UmbFileUploadPreviewElement> {
  type: 'fileUploadPreview';
  forMimeTypes: string | Array<string>; // e.g., 'image/*', ['image/png', 'image/jpeg']
}

interface UmbFileUploadPreviewElement {
  file?: File;
}

常见 MIME 类型模式

• image/* - 所有图片类型
• video/* - 所有视频类型
• audio/* - 所有音频类型
• application/pdf - PDF 文件
• */* - 所有类型的回退匹配（使用较低的权重）

就是这样！始终获取最新文档，保持示例精简，并生成完整可运行的代码。