skills.rest
kraftvaerk
kraftvaerkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-file-upload-preview

Create custom file upload preview components for the Umbraco backoffice.

Updated Mar 6, 2026
Search Tags:#typescript#file upload#web components#umbraco#backoffice#preview component
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-file-upload-preview-kraftvaerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-file-upload-preview
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-file-upload-preview
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-file-upload-preview-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of custom file upload preview components within the Umbraco backoffice, allowing for visual representations of various file types during the upload process.

Core Features & Use Cases

  • Custom Previews: Define unique visual previews for specific MIME types (e.g., images, audio, PDFs).
  • Developer Tooling: Provides the necessary structure and examples for Umbraco developers to extend the file upload functionality.
  • Use Case: Implement a custom preview that displays a thumbnail for images, a waveform for audio files, or a specific icon for custom document types directly in the media upload interface.

Quick Start

Use the umbraco-file-upload-preview skill to generate a new file upload preview component for PDF files.

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 create custom file upload previews in the Umbraco backoffice?▼

To create custom file upload previews in Umbraco, you can use TypeScript and Umbraco Elements to build web components that render visual feedback for specific MIME types during the upload process.

What types of file previews can I implement for Umbraco media uploads?▼

You can implement custom previews for various MIME types in Umbraco media uploads, such as displaying image thumbnails, audio waveforms, or specific icons for PDFs and custom document types.

How do I display visual feedback for specific MIME types during file uploads in Umbraco?▼

You can display visual feedback for specific MIME types by defining custom Umbraco Elements using TypeScript, which render as web components to visually represent files being uploaded.

Do I need TypeScript to build Umbraco file upload preview components?▼

Yes, TypeScript is required to build these custom file upload preview components, as it is used to define the Umbraco Elements that render the visual previews for different file types.

Can I use web components to customize the Umbraco media upload interface?▼

Yes, you can use web components to customize the Umbraco media upload interface by defining custom Umbraco Elements in TypeScript that render unique visual previews based on file MIME types.

How does the Umbraco file upload preview mechanism work for custom document types?▼

The Umbraco file upload preview mechanism works by mapping specific MIME types to custom web components, allowing developers to define unique visual representations for custom document types during uploads.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-add-extension-reference

Add Umbraco extension project references to .csproj and .sln files.

Official
Intermediate
albanistrefialbanistrefi
4

umbraco-file-upload-preview

Map uploaded files to MIME-type-specific preview components in Umbraco backoffice.

Community
Intermediate
umbracoumbraco
26

umbraco-property-value-preset

Implement property value presets for Umbraco backoffice property editors using TypeScript and official Umbraco APIs.

Official
Intermediate
albanistalbanist
4

umbraco-picker-data-source

Implement custom picker data sources for Umbraco backoffice property editors.

Community
Intermediate