umbraco-file-upload-preview

Umbraco ファイルアップロードプレビュー

これは何ですか？

ファイルアップロードプレビューは、Umbraco でのアップロード中に特定のファイルタイプのプレビューをレンダリングするカスタム Web コンポーネントです。これにより、MIME タイプに基づいてファイルの視覚的な表現を作成できます。たとえば、画像のサムネイル、音声の波形、特定のファイル形式のカスタムアイコンなどを表示できます。

ドキュメント

実装する前に、常に最新のドキュメントを取得してください：

• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• Extension Registry: 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

関連する Foundation スキル

• 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 ファイル
• */* - すべてのタイプのフォールバック（より低い重みで使用）

以上です！常に最新のドキュメントを取得し、例は最小限に保ち、完全に動作するコードを生成してください。