Implement image upload functionality with temporary storage and cleanup. Update chat and broadcast logic to handle image URLs instead of base64 data, enhancing performance and user experience. Modify .gitignore to exclude temporary files and uploads directory.

client/src/components/ChatInput.vue

@@ -95,21 +95,33 @@ async function handleImageUpload(event) {
   }
   
   try {
-    // Lese Bild als Base64
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const base64Image = e.target.result;
-      // Sende Bild als Nachricht
-      chatStore.sendImage(chatStore.currentConversation, base64Image, file.type);
-    };
-    reader.onerror = (error) => {
-      console.error('Fehler beim Lesen des Bildes:', error);
-      alert('Fehler beim Lesen des Bildes');
-    };
-    reader.readAsDataURL(file);
+    // Erstelle FormData für Upload
+    const formData = new FormData();
+    formData.append('image', file);
+    
+    // Lade Bild hoch
+    const response = await fetch('/api/upload-image', {
+      method: 'POST',
+      body: formData,
+      credentials: 'include' // Wichtig für Session-Cookies
+    });
+    
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Unbekannter Fehler' }));
+      throw new Error(errorData.error || 'Fehler beim Hochladen des Bildes');
+    }
+    
+    const data = await response.json();
+    
+    if (data.success && data.code) {
+      // Sende nur den Code über Socket.IO
+      chatStore.sendImage(chatStore.currentConversation, data.code, data.url);
+    } else {
+      throw new Error('Ungültige Antwort vom Server');
+    }
   } catch (error) {
     console.error('Fehler beim Bild-Upload:', error);
-    alert('Fehler beim Bild-Upload');
+    alert('Fehler beim Bild-Upload: ' + error.message);
   }
   
   // Input zurücksetzen, damit das gleiche Bild erneut ausgewählt werden kann

client/src/stores/chat.js

@@ -226,17 +226,19 @@ export const useChatStore = defineStore('chat', () => {
       case 'message':
         // Debug-Logging für empfangene Nachrichten
         if (data.isImage) {
-          console.log('[Bild empfangen] Von:', data.from, 'Typ:', data.imageType, 'Größe:', data.message ? data.message.length : 0, 'Zeichen');
+          console.log('[Bild empfangen] Von:', data.from, 'URL:', data.imageUrl || data.message);
         }
         
         if (currentConversation.value === data.from) {
           const newMessage = {
             from: data.from,
-            message: data.message,
+            message: data.imageUrl || data.message, // Verwende URL für Bilder
             timestamp: data.timestamp,
             self: false,
             isImage: data.isImage || false,
-            imageType: data.imageType || null
+            imageType: data.imageType || null,
+            imageUrl: data.imageUrl || null,
+            imageCode: data.imageCode || null
           };
           
           console.log('[Nachricht hinzugefügt]', newMessage);
@@ -254,11 +256,13 @@ export const useChatStore = defineStore('chat', () => {
         currentConversation.value = data.with;
         messages.value = data.messages.map(msg => ({
           from: msg.from,
-          message: msg.message,
+          message: msg.imageUrl || msg.message, // Verwende URL für Bilder
           timestamp: msg.timestamp,
           self: msg.from === userName.value,
           isImage: msg.isImage || false,
-          imageType: msg.imageType || null
+          imageType: msg.imageType || null,
+          imageUrl: msg.imageUrl || null,
+          imageCode: msg.imageCode || null
         }));
         break;
       case 'searchResults':
@@ -355,7 +359,7 @@ export const useChatStore = defineStore('chat', () => {
     resetTimeoutTimer();
   }
 
-  function sendImage(toUserName, imageData, imageType) {
+  function sendImage(toUserName, imageCode, imageUrl) {
     if (!socket.value || !socket.value.connected) {
       console.error('Socket.IO nicht verbunden');
       return;
@@ -369,20 +373,20 @@ export const useChatStore = defineStore('chat', () => {
     const messageId = Date.now().toString();
     socket.value.emit('message', {
       toUserName,
-      message: imageData, // Base64-kodiertes Bild
+      message: imageCode, // Nur der Code, nicht das gesamte Bild
       messageId,
       isImage: true,
-      imageType: imageType
+      imageUrl: imageUrl // URL für das Bild
     });
     
-    // Lokal hinzufügen
+    // Lokal hinzufügen (mit URL)
     messages.value.push({
       from: userName.value,
-      message: imageData,
+      message: imageUrl, // Verwende URL statt Code für lokale Anzeige
       timestamp: new Date().toISOString(),
       self: true,
       isImage: true,
-      imageType: imageType
+      imageCode: imageCode
     });
     
     // Timeout zurücksetzen bei Aktivität