diff --git a/assets/js/main.js b/assets/js/main.js index a439436..cc684c1 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -17,14 +17,24 @@ document.addEventListener('DOMContentLoaded', function () { }); } + + + const debugPanel = document.getElementById('debug-panel'); + const debugLog = document.getElementById('debug-log'); + + function logToDebug(message) { + if(debugPanel && debugLog) { + debugPanel.style.display = 'block'; + debugLog.textContent += message + '\n'; + } + console.log(message); + } + if(fileUploadInput) { fileUploadInput.addEventListener('change', () => { if (fileUploadInput.files.length > 0) { const file = fileUploadInput.files[0]; - const fileName = file.name; - if(fileNameDisplay) { - fileNameDisplay.textContent = `Selected file: ${fileName}`; - } + logToDebug('File selected: ' + file.name); const formData = new FormData(); formData.append('document', file); @@ -36,47 +46,56 @@ document.addEventListener('DOMContentLoaded', function () { method: 'POST', body: formData }) - .then(response => response.json()) + .then(response => { + logToDebug('Received response from server. Status: ' + response.status); + return response.json(); + }) .then(data => { processingMessage.style.display = 'none'; - if (data.success && data.filePath) { - uploadedFilePath = data.filePath; + + if (data.success && data.path) { + uploadedFilePath = data.path; + const file = fileUploadInput.files[0]; const fileExtension = uploadedFilePath.split('.').pop().toLowerCase(); - const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'tiff', 'bmp', 'webp']; - const imagePreview = document.getElementById('image-preview'); - const pdfPreview = document.getElementById('pdf-preview'); - const pdfFilename = document.getElementById('pdf-filename'); - - imagePreview.style.display = 'none'; - pdfPreview.style.display = 'none'; + fileUploadLabel.style.display = 'none'; + fileNameDisplay.textContent = file.name; if (imageExtensions.includes(fileExtension)) { + imagePreview.onload = function() { + previewContainer.style.display = 'block'; + imagePreview.style.display = 'block'; + startTranslationBtn.style.display = 'block'; + }; + imagePreview.onerror = function() { + alert('Error loading image preview.'); + fileUploadLabel.style.display = 'block'; + }; imagePreview.src = uploadedFilePath + '?t=' + new Date().getTime(); - imagePreview.style.display = 'block'; + } else if (fileExtension === 'pdf') { - pdfFilename.textContent = uploadedFilePath.split('/').pop(); - pdfPreview.style.display = 'block'; + const pdfFilename = document.getElementById('pdf-filename'); + pdfFilename.textContent = file.name; + previewContainer.style.display = 'block'; + document.getElementById('pdf-preview').style.display = 'block'; + startTranslationBtn.style.display = 'block'; } else { - pdfFilename.textContent = "Unsupported file type for preview: " + uploadedFilePath.split('/').pop(); - pdfPreview.style.display = 'block'; + alert("Unsupported file type for preview."); + fileUploadLabel.style.display = 'block'; } - previewContainer.style.display = 'block'; - document.getElementById('translation-form').style.display = 'none'; - startTranslationBtn.style.display = 'block'; } else { throw new Error(data.message || 'File upload failed.'); } }) .catch(error => { + logToDebug('An error occurred in the upload process: ' + error.message); processingMessage.style.display = 'none'; const responseMessageDiv = document.getElementById('response-message'); responseMessageDiv.innerHTML = `