file-preview-element Web Component 📁

A custom web component for file previews. Built with Angular Elements, it can be integrated into any web application (Angular, React, Vue, or vanilla JS).

🚀 Features

• Multi-format support: Images, PDF, Video, Audio, Text/Markdown, and Office files (Word, Excel, PowerPoint).
• Responsive Design: Adapts to its container size.
• Theming: Built-in Light and Dark themes.
• Event-driven: Emits events for loading, errors, and closure.
• Standalone: No external dependencies needed for the consumer.

:earth_africa: Live Example

Vue gh-pages

🅰️ Integration in Angular (Step-by-Step)

Follow these detailed steps to integrate the file-preview web component into your Angular project:

1. Include the Library Script

Copy the main.js from dist/file-preview-element/browser/ to your project's assets folder (e.g., src/assets/js/).

Then, add it to your angular.json:

"scripts": [
  "src/assets/js/main.js"
]

2. Enable Custom Elements

Since file-preview is a web component (not a standard Angular component), you must tell Angular to allow unknown tags by adding CUSTOM_ELEMENTS_SCHEMA.

For Standalone Components:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-my-viewer',
  standalone: true,
  template: `
    <file-preview [attr.file]="fileJson" theme="dark"></file-preview>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyViewerComponent {
  fileJson = JSON.stringify({ name: 'test.pdf', url: 'https://example.com/test.pdf' });
}

For NgModule-based Projects:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [...],
  imports: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyModule { }

3. Handle Events

The component emits a native preview-event. You can catch it using standard Angular event binding:

<file-preview
  [attr.file]="fileData"
  (preview-event)="onPreviewEvent($event)"
></file-preview>

onPreviewEvent(event: any) {
  const previewEvent = event.detail; // PreviewEvent object
  console.log('Event Type:', previewEvent.type); // 'load', 'error', or 'close'
  console.log('File Info:', previewEvent.file);
}

:computer: Vanilla HTML/JS Usage

<script src="path/to/main.js"></script>

<file-preview
  file='{"name":"foto.jpg","url":"https://picsum.photos/800/600"}'
  theme="light"
  show-header="true"
  closeable="true"
></file-preview>

<script>
  const preview = document.querySelector('file-preview');
  preview.addEventListener('preview-event', (e) => {
    console.log('Event:', e.detail);
  });
</script>

🛠️ API Reference

Attributes / Inputs

| Attribute | Type | Default | Description | | :--- | :--- | :--- | :--- | | file | string | PreviewFile | - | JSON string or object with name and url. | | theme | 'light' | 'dark' | 'light' | Visual theme of the previewer. | | show-header | boolean | true | Show/hide the top bar with filename. | | closeable | boolean | false | Show/hide the close button. | | unknown-msg | string | 'Tipo...' | Message shown for unsupported types. | | app-view-url | string | Office URL | URL base for Office Online viewer. |

Events

| Event | Detail Type | Description | | :--- | :--- | :--- | | preview-event | PreviewEvent | Emitted on load, error, or close. |

🎨 CSS Customization

You can further customize the look using CSS variables:

file-preview {
  --fp-accent: #ff4757;
  --fp-bg: #f1f2f6;
  border-radius: 12px;
}