skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-file-upload-preview

Implement MIME-type-specific file upload preview components in the Umbraco backoffice.

1|Updated May 21, 2026
Search Tags:#umbraco#backoffice#mime types#ui rendering#extension manifest#file upload preview#lit web components
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-file-upload-preview-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-file-upload-preview
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-file-upload-preview
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-file-upload-preview-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create clear, visual file previews in Umbraco backoffice so users can quickly understand what they uploaded without opening files.

Core Features & Use Cases

  • Implements file upload preview web components that render UI based on MIME types during upload.
  • Registers previews via an extension manifest to map specific MIME types (or patterns like image/*) to a custom element.
  • Handles common preview scenarios like showing icons/thumbnails for images, rendering PDF-specific UI, or providing fallbacks for unknown types.

Quick Start

Create a fileUploadPreview extension manifest that maps your target MIME types to a custom Lit element implementing UmbFileUploadPreviewElement, then verify it renders the expected preview during Umbraco backoffice uploads.

Frequently Asked Questions about umbraco-file-upload-preview

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I show file upload previews in the Umbraco backoffice?▼

You can create custom file upload previews in Umbraco by registering a `fileUploadPreview` extension manifest that maps target MIME types to a custom Lit web component implementing `UmbFileUploadPreviewElement`.

Can I render MIME type specific UI for uploaded files in Umbraco?▼

Yes, rendering MIME type specific UI in Umbraco is possible by configuring the extension manifest to target correct elements for `forMimeTypes`, enabling distinct visual previews for images, audio/video, and documents.

How do I add a PDF preview extension manifest in Umbraco?▼

Adding a PDF preview extension manifest in Umbraco involves mapping the `application/pdf` MIME type to a custom element within your `fileUploadPreview` manifest to render document-specific UI during upload.

Does Umbraco support custom Lit web components for backoffice UI rendering?▼

Umbraco supports custom Lit web components for backoffice UI rendering by allowing you to build elements that implement `UmbFileUploadPreviewElement` and registering them through the extension manifest.

What is needed to handle fallbacks for unknown MIME types during Umbraco file uploads?▼

Handling fallbacks for unknown MIME types during Umbraco file uploads requires configuring your custom `fileUploadPreview` component to provide a default visual fallback when the uploaded file type does not match targeted patterns.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-preview-app-provider

Create custom preview app providers in the Umbraco backoffice.

Official
Intermediate
albanistalbanist
4

umbraco-file-upload-preview

Generate custom file upload preview components for the Umbraco backoffice.

Community
Intermediate
twofoldtech-dakotatwofoldtech-dakota
2

umbraco-modern-guide

Guide developers in building Umbraco 14+ backoffice features with Lit components.

Community
Advanced
kraftvaerkkraftvaerk

umbraco-file-upload-preview

Create custom file upload preview components for the Umbraco backoffice.

Official
Intermediate