| class UploadButton extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .upload-btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| padding: 0.75rem 1.5rem; |
| background-color: #6366f1; |
| color: white; |
| border-radius: 0.5rem; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.2s; |
| border: none; |
| outline: none; |
| } |
| .dark .upload-btn { |
| background-color: #8b5cf6; |
| } |
| .upload-btn:hover { |
| background-color: #4f46e5; |
| transform: translateY(-1px); |
| } |
| .dark .upload-btn:hover { |
| background-color: #7c3aed; |
| } |
| .upload-btn:active { |
| transform: translateY(0); |
| } |
| .upload-icon { |
| margin-right: 0.5rem; |
| } |
| input[type="file"] { |
| display: none; |
| } |
| </style> |
| <button class="upload-btn"> |
| <i data-feather="upload" class="upload-icon"></i> |
| <span><slot>Upload Document</slot></span> |
| <input type="file" accept=".pdf,.jpg,.jpeg,.png" /> |
| </button> |
| `; |
|
|
| const button = this.shadowRoot.querySelector('.upload-btn'); |
| const fileInput = this.shadowRoot.querySelector('input[type="file"]'); |
| |
| button.addEventListener('click', () => fileInput.click()); |
| fileInput.addEventListener('change', (e) => this.handleFileSelect(e)); |
| } |
|
|
| handleFileSelect(event) { |
| const file = event.target.files[0]; |
| if (file) { |
| this.dispatchEvent(new CustomEvent('file-uploaded', { |
| detail: { file }, |
| bubbles: true, |
| composed: true |
| })); |
| } |
| } |
| } |
|
|
| customElements.define('upload-button', UploadButton); |
