| class FilePreview extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| .preview-container { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| margin-top: 0.5rem; |
| } |
| .preview-item { |
| display: block; |
| background: #f3f4f6; |
| border-radius: 0.375rem; |
| padding: 0.75rem; |
| margin-bottom: 0.5rem; |
| font-size: 0.875rem; |
| } |
| .file-info { |
| overflow: hidden; |
| } |
| .file-name { |
| font-weight: 500; |
| color: #374151; |
| } |
| .remove-btn { |
| display: flex; |
| align-items: center; |
| padding: 0.25rem; |
| border-radius: 9999px; |
| transition: all 0.2s; |
| } |
| .remove-btn:hover { |
| background: rgba(239, 68, 68, 0.1); |
| } |
| </style> |
| <div class="preview-container" id="previews"></div> |
| `; |
|
|
| const input = document.getElementById('attachments'); |
| if (input) { |
| input.addEventListener('change', this.updatePreviews.bind(this)); |
| } |
|
|
| |
| function getFileType(file) { |
| if (file.type.startsWith('image/')) return 'image'; |
| if (file.type.startsWith('video/')) return 'video'; |
| if (file.type.startsWith('audio/')) return 'audio'; |
| return 'document'; |
| } |
|
|
| function getFileIcon(file) { |
| if (file.type === 'application/pdf') return 'file-text'; |
| if (file.type.includes('document') || file.name.match(/\.(docx?|txt|rtf)$/i)) return 'file-text'; |
| if (file.type.includes('spreadsheet') || file.name.match(/\.(xlsx?|csv)$/i)) return 'file-text'; |
| if (file.type.includes('presentation') || file.name.match(/\.(pptx?|key)$/i)) return 'file-text'; |
| if (file.type.startsWith('video/')) return 'film'; |
| if (file.type.startsWith('audio/')) return 'music'; |
| if (file.name.match(/\.(zip|rar|7z|tar|gz)$/i)) return 'archive'; |
| return 'file'; |
| } |
|
|
| function formatFileSize(bytes) { |
| if (bytes === 0) return '0 Bytes'; |
| const k = 1024; |
| const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
| } |
| } |
|
|
| updatePreviews() { |
| const input = document.getElementById('attachments'); |
| const previewsContainer = this.shadowRoot.getElementById('previews'); |
| previewsContainer.innerHTML = ''; |
|
|
| Array.from(input.files).forEach((file, index) => { |
| const previewItem = document.createElement('div'); |
| previewItem.className = 'preview-item'; |
| const fileType = getFileType(file); |
| |
| previewItem.innerHTML = ` |
| <div class="flex items-center"> |
| <div class="file-icon mr-3"> |
| ${fileType === 'image' ? |
| `<img src="${URL.createObjectURL(file)}" alt="${file.name}" class="w-10 h-10 object-cover rounded">` : |
| `<i data-feather="${getFileIcon(file)}" class="text-gray-500"></i>` |
| } |
| </div> |
| <div class="file-info flex-1 min-w-0"> |
| <div class="file-name truncate">${file.name}</div> |
| <div class="file-size text-xs text-gray-500">${formatFileSize(file.size)}</div> |
| </div> |
| <div class="remove-btn ml-2 text-red-500 hover:text-red-700 cursor-pointer" data-index="${index}"> |
| <i data-feather="x"></i> |
| </div> |
| </div> |
| `; |
| previewsContainer.appendChild(previewItem); |
| }); |
|
|
| feather.replace(); |
|
|
| |
| this.shadowRoot.querySelectorAll('.remove-btn').forEach(btn => { |
| btn.addEventListener('click', (e) => { |
| e.stopPropagation(); |
| const index = parseInt(btn.dataset.index); |
| this.removeFile(index); |
| }); |
| }); |
| } |
|
|
| removeFile(index) { |
| const input = document.getElementById('attachments'); |
| const files = Array.from(input.files); |
| files.splice(index, 1); |
| |
| |
| const dataTransfer = new DataTransfer(); |
| files.forEach(file => dataTransfer.items.add(file)); |
| input.files = dataTransfer.files; |
| |
| this.updatePreviews(); |
| } |
| } |
|
|
| customElements.define('file-preview', FilePreview); |
