105 lines
4.1 KiB
JavaScript
105 lines
4.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const fileUploadInput = document.getElementById('document-upload');
|
|
const fileUploadLabel = document.querySelector('.custom-file-upload');
|
|
const fileNameDisplay = document.getElementById('file-upload-filename');
|
|
const translateBtn = document.getElementById('translate-btn');
|
|
const processingMessage = document.getElementById('processing-message');
|
|
|
|
// Trigger file input click when the custom upload area is clicked
|
|
if(fileUploadLabel) {
|
|
fileUploadLabel.addEventListener('click', () => {
|
|
if(fileUploadInput) {
|
|
fileUploadInput.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update UI when a file is selected
|
|
if(fileUploadInput) {
|
|
fileUploadInput.addEventListener('change', () => {
|
|
if (fileUploadInput.files.length > 0) {
|
|
const fileName = fileUploadInput.files[0].name;
|
|
if(fileNameDisplay) {
|
|
fileNameDisplay.textContent = `Selected file: ${fileName}`;
|
|
}
|
|
if(translateBtn) {
|
|
translateBtn.disabled = false;
|
|
}
|
|
} else {
|
|
if(fileNameDisplay) {
|
|
fileNameDisplay.textContent = '';
|
|
}
|
|
if(translateBtn) {
|
|
translateBtn.disabled = true;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle form submission
|
|
const translationForm = document.getElementById('translation-form');
|
|
if(translationForm) {
|
|
translationForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData();
|
|
formData.append('document', fileUploadInput.files[0]);
|
|
formData.append('source-lang', document.getElementById('source-lang').value);
|
|
formData.append('target-lang', document.getElementById('target-lang').value);
|
|
|
|
const responseMessageDiv = document.getElementById('response-message');
|
|
|
|
if(processingMessage) {
|
|
processingMessage.style.display = 'block';
|
|
}
|
|
if(responseMessageDiv){
|
|
responseMessageDiv.innerHTML = '';
|
|
responseMessageDiv.style.display = 'none';
|
|
}
|
|
|
|
if(translateBtn) {
|
|
translateBtn.disabled = true;
|
|
translateBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Translating...';
|
|
}
|
|
|
|
fetch('upload.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if(processingMessage) {
|
|
processingMessage.style.display = 'none';
|
|
}
|
|
if(responseMessageDiv){
|
|
const alertClass = data.status === 'success' ? 'alert-success' : 'alert-danger';
|
|
responseMessageDiv.innerHTML = `<div class="alert ${alertClass}" role="alert">${data.message}</div>`;
|
|
responseMessageDiv.style.display = 'block';
|
|
}
|
|
if(translateBtn) {
|
|
translateBtn.disabled = false;
|
|
translateBtn.innerHTML = 'Translate';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
if(processingMessage) {
|
|
processingMessage.style.display = 'none';
|
|
}
|
|
if(responseMessageDiv){
|
|
responseMessageDiv.innerHTML = `<div class="alert alert-danger" role="alert">An error occurred during the upload. Please try again.</div>`;
|
|
responseMessageDiv.style.display = 'block';
|
|
}
|
|
if(translateBtn) {
|
|
translateBtn.disabled = false;
|
|
translateBtn.innerHTML = 'Translate';
|
|
}
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
}
|
|
}); |