preview is working

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 = `<div class="alert alert-danger" role="alert">An unexpected error occurred: ${error.message}</div>`;
                     responseMessageDiv.style.display = 'block';
-                    console.error('Upload Error:', error);
                 });
 
             }

index.php

@@ -39,6 +39,7 @@
 
     <main class="container my-5">
         
+        
         <div class="row justify-content-center">
             <div class="col-lg-8">
                 <div class="translation-box">

upload.php

@@ -5,10 +5,12 @@ ini_set('error_log', __DIR__ . '/error_log.txt');
 
 header('Content-Type: application/json');
 
-function json_response($success, $message, $filePath = null) {
-    $response = ['success' => $success, 'message' => $message];
-    if ($filePath) {
-        $response['filePath'] = $filePath;
+function json_response($success, $data) {
+    $response = ['success' => $success];
+    if (is_string($data)) {
+        $response['message'] = $data;
+    } elseif (is_array($data)) {
+        $response = array_merge($response, $data);
     }
     echo json_encode($response);
     exit;
@@ -51,8 +53,10 @@ $target_path = $upload_dir . $file_name;
 
 if (move_uploaded_file($file['tmp_name'], $target_path)) {
     
-    $web_path = '/uploads/' . $file_name;
-    json_response(true, 'File uploaded successfully.', $web_path);
+    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || $_SERVER['SERVER_PORT'] == 443 ? "https://" : "http://";
+    $domain_name = $_SERVER['HTTP_HOST'];
+    $web_path = $protocol . $domain_name . '/uploads/' . $file_name;
+    json_response(true, ['path' => $web_path, 'message' => 'File uploaded successfully.']);
 } else {
     json_response(false, 'Failed to move uploaded file.');
 }