Shadow File Previewer

Shadow File Previewer is a modern Web Component using Shadow DOM to provide clean, encapsulated file previews directly in the browser. It supports drag-and-drop, file browsing, and displays previews for common file types like images, videos, PDFs, audio, and text. Perfect for integrating into any modern frontend stack.

✨ Features

• 🖼️ Image, video, PDF, audio, and text preview support
• 🔒 Encapsulated styles using Shadow DOM
• ⚡ Lightweight and dependency-free
• 🧩 Framework-agnostic — works with plain HTML, React, Vue, etc.
• 🧹 Built-in file removal event with custom handling support

📦 Installation

Install via npm:

npm install shadow-dom-package

Or use it directly via CDN:

<script type="module" src="https://unpkg.com/shadow-dom-package"></script>

🚀 Usage

✅ HTML Markup

<!-- Upload UI (optional) -->
<div class="upload-area" id="externalUploadArea">
  <p>Drag & drop files here or</p>
  <label class="upload-label">
    Browse Files
    <input type="file" id="externalFileUpload" multiple />
  </label>
</div>

<!-- Shadow DOM Web Component -->
<my-component></my-component>

📜 JavaScript

import 'shadow-dom-package';

const myComponent = document.querySelector('my-component');
const fileInput = document.getElementById('externalFileUpload');

// Handle file input
fileInput.addEventListener('change', () => {
  const files = Array.from(fileInput.files);
  myComponent.displayFiles(files);
});

// Listen for file removal
myComponent.addEventListener('file-removed', (e) => {
  const removedFile = e.detail.file;
  console.log('File removed:', removedFile);
});

📤 Events

file-removed

This event is dispatched when a user removes a file using the UI.

myComponent.addEventListener('file-removed', (e) => {
  const removedFile = e.detail.file;
  console.log('Removed file metadata:', removedFile);
});

📁 Supported File Types

| File Type | Rendered As | |------------------------------------------------|------------------------| | Images (image/*) | <img> | | Videos (video/*) | <video> | | PDFs (application/pdf) | <iframe> | | Audio (audio/*) | <audio> | | Text/Code (text/plain, application/json, etc.) | Text preview | | Others | Download fallback UI |

🧩 Styling

All internal styles are scoped using Shadow DOM. You can style the upload container outside of <my-component>, but internal styles (e.g., preview cards) are fully encapsulated.

🔧 Method

displayFiles(File[])

Renders file previews based on an array of File objects (from a file input or drag-and-drop):

myComponent.displayFiles(filesArray);

📝 License

MIT License

Made with ❤️ using Web Components and Shadow DOM.