`;
this.setupEventListeners();
}
setupEventListeners() {
const uploadZone = this.shadowRoot.getElementById('upload-zone');
const fileInput = this.shadowRoot.getElementById('file-input');
// Click to select file
uploadZone.addEventListener('click', (e) => {
if (e.target !== fileInput) {
fileInput.click();
}
});
// File input change
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
this.dispatchFileSelected(file);
}
});
// Drag and drop events
uploadZone.addEventListener('dragenter', (e) => {
e.preventDefault();
e.stopPropagation();
this.dragCounter++;
uploadZone.classList.add('drag-over');
});
uploadZone.addEventListener('dragleave', (e) => {
e.preventDefault();
e.stopPropagation();
this.dragCounter--;
if (this.dragCounter === 0) {
uploadZone.classList.remove('drag-over');
}
});
uploadZone.addEventListener('dragover', (e) => {
e.preventDefault();
e.stopPropagation();
});
uploadZone.addEventListener('drop', (e) => {
e.preventDefault();
e.stopPropagation();
this.dragCounter = 0;
uploadZone.classList.remove('drag-over');
const files = e.dataTransfer.files;
if (files.length > 0) {
const file = files[0];
const validTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png'];
if (validTypes.includes(file.type)) {
this.dispatchFileSelected(file);
} else {
this.dispatchEvent(new CustomEvent('invalid-file', {
detail: { message: 'ไฟล์ไม่รองรับ กรุณาอัปโหลด PDF, JPG หรือ PNG' },
bubbles: true,
composed: true
}));
}
}
});
}
dispatchFileSelected(file) {
this.dispatchEvent(new CustomEvent('file-selected', {
detail: { file: file },
bubbles: true,
composed: true
}));
}
}
customElements.define('upload-zone', UploadZone);