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/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