more error handling and logging in uploads mechanic

src/pages/contribute/knowledgebase.astro

@@ -237,6 +237,7 @@ class KnowledgebaseForm {
 
   constructor() {
     this.init();
+    this.checkUploadStatus();
   }
 
   private init() {
@@ -319,28 +320,71 @@ class KnowledgebaseForm {
 
   private async uploadFile(fileId: string) {
     const fileItem = this.uploadedFiles.find(f => f.id === fileId);
-    if (!fileItem) return;
+    if (!fileItem) {
+      console.error('[UPLOAD] File item not found for ID:', fileId);
+      return;
+    }
+
+    console.log('[UPLOAD] Starting upload for:', fileItem.name, 'Size:', fileItem.file.size, 'Type:', fileItem.file.type);
 
     const formData = new FormData();
     formData.append('file', fileItem.file);
     formData.append('type', 'knowledgebase');
 
     try {
+      console.log('[UPLOAD] Sending request to /api/upload/media');
+      
       const response = await fetch('/api/upload/media', {
         method: 'POST',
         body: formData
       });
 
+      console.log('[UPLOAD] Response status:', response.status);
+      console.log('[UPLOAD] Response headers:', Object.fromEntries(response.headers.entries()));
+
       if (response.ok) {
         const result = await response.json();
+        console.log('[UPLOAD] Success result:', result);
+        
         fileItem.uploaded = true;
         fileItem.url = result.url;
         this.renderFileList();
+        
+        this.showMessage('success', `Successfully uploaded ${fileItem.name}`);
       } else {
-        throw new Error('Upload failed');
+        // Enhanced error handling - read the actual error from response
+        let errorMessage = `Upload failed with status ${response.status}`;
+        
+        try {
+          const errorData = await response.json();
+          console.error('[UPLOAD] Error response data:', errorData);
+          
+          if (errorData.error) {
+            errorMessage = errorData.error;
+          }
+          
+          // Log additional details if available
+          if (errorData.details) {
+            console.error('[UPLOAD] Error details:', errorData.details);
+            errorMessage += ` (Details: ${errorData.details.join(', ')})`;
+          }
+        } catch (parseError) {
+          console.error('[UPLOAD] Could not parse error response:', parseError);
+          const errorText = await response.text();
+          console.error('[UPLOAD] Raw error response:', errorText);
+          errorMessage += ` (Raw: ${errorText.substring(0, 100)})`;
+        }
+        
+        throw new Error(errorMessage);
       }
     } catch (error) {
-      this.showMessage('error', `Failed to upload ${fileItem.name}`);
+      console.error('[UPLOAD] Upload error for', fileItem.name, ':', error);
+      
+      const errorMessage = error instanceof Error 
+        ? error.message 
+        : 'Unknown upload error';
+      
+      this.showMessage('error', `Failed to upload ${fileItem.name}: ${errorMessage}`);
       this.removeFile(fileId);
     }
   }
@@ -441,16 +485,63 @@ class KnowledgebaseForm {
     this.renderFileList();
   }
 
-  private showMessage(type: 'success' | 'error' | 'warning', message: string) {
+  private showMessage(type: 'success' | 'error' | 'warning', message: string, details?: string) {
     const container = document.getElementById('message-container');
     if (!container) return;
 
     const messageEl = document.createElement('div');
     messageEl.className = `message message-${type}`;
-    messageEl.textContent = message;
+    
+    // Create message content with optional details
+    const messageContent = document.createElement('div');
+    messageContent.className = 'message-content';
+    messageContent.textContent = message;
+    
+    messageEl.appendChild(messageContent);
+    
+    // Add details if provided
+    if (details) {
+      const detailsEl = document.createElement('div');
+      detailsEl.className = 'message-details';
+      detailsEl.textContent = details;
+      messageEl.appendChild(detailsEl);
+    }
+    
+    // Add close button
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'message-close';
+    closeBtn.innerHTML = '×';
+    closeBtn.onclick = () => messageEl.remove();
+    messageEl.appendChild(closeBtn);
 
     container.appendChild(messageEl);
-    setTimeout(() => messageEl.remove(), 5000);
+    
+    // Auto-remove after 10 seconds for errors (to give time to read), 5 seconds for others
+    const timeout = type === 'error' ? 10000 : 5000;
+    setTimeout(() => {
+      if (messageEl.parentNode) {
+        messageEl.remove();
+      }
+    }, timeout);
+  }
+
+  private async checkUploadStatus() {
+    try {
+      console.log('[DIAGNOSTIC] Checking upload endpoint status');
+      const response = await fetch('/api/upload/media', { method: 'GET' });
+      const status = await response.json();
+      console.log('[DIAGNOSTIC] Upload status:', status);
+      
+      if (!status.storage?.nextcloud?.configured && !status.storage?.local?.available) {
+        this.showMessage('warning', 'No upload storage configured. Check server configuration.');
+      }
+      
+      return status;
+    } catch (error) {
+      console.error('[DIAGNOSTIC] Failed to check upload status:', error);
+      this.showMessage('error', 'Could not connect to upload service');
+      return null;
+    }
   }
 
   public removeFileById(fileId: string) {