keep delving you got this. as well as the simple uploads paperclip functioning (say 50 mb cap) - Follow Up Deployment

index.html

@@ -225,18 +225,38 @@
             </div>
 
             <!-- Message Input -->
-            <div class="bg-gray-800 border-t border-gray-700 p-4">
+            <div class="bg-gray-800 border-t border-gray-700 p-4 relative">
+                <div id="fileStatus" class="absolute -top-8 left-0 right-0 px-4 hidden">
+                    <div class="bg-gray-700 rounded-t-lg px-3 py-1 text-sm flex items-center justify-between">
+                        <span id="fileName" class="truncate text-purple-300"></span>
+                        <div class="flex items-center space-x-2">
+                            <span id="fileSize" class="text-xs text-gray-400">0/50MB</span>
+                            <button id="cancelUpload" class="text-gray-400 hover:text-red-400">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div id="progressBar" class="h-1 bg-gray-600 rounded-b">
+                        <div id="progress" class="h-full bg-purple-500 rounded-b" style="width: 0%"></div>
+                    </div>
+                </div>
                 <div class="flex items-center space-x-2">
-                    <button class="p-2 rounded-full hover:bg-gray-700">
-                        <i class="fas fa-plus text-gray-400"></i>
-                    </button>
+                    <div class="relative">
+                        <input type="file" id="fileUpload" class="hidden" accept="image/*, video/*, audio/*, .pdf, .doc, .docx, .txt">
+                        <button id="uploadButton" class="p-2 rounded-full hover:bg-gray-700">
+                            <i class="fas fa-plus text-gray-400"></i>
+                        </button>
+                        <div id="uploadProgress" class="absolute -top-2 -right-2 w-4 h-4 rounded-full bg-purple-500 hidden flex items-center justify-center">
+                            <span class="text-white text-xs">100</span>
+                        </div>
+                    </div>
                     <div class="flex-1 relative">
                         <input id="messageInput" type="text" placeholder="Message #general" class="w-full bg-gray-700 rounded-full px-4 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
                         <div class="absolute right-2 top-1/2 transform -translate-y-1/2 flex space-x-1">
                             <button class="p-1 text-gray-400 hover:text-gray-200">
                                 <i class="fas fa-smile"></i>
                             </button>
-                            <button class="p-1 text-gray-400 hover:text-gray-200">
+                            <button id="attachmentButton" class="p-1 text-gray-400 hover:text-gray-200">
                                 <i class="fas fa-paperclip"></i>
                             </button>
                         </div>
@@ -626,6 +646,121 @@
             }
         }
 
+        // File upload functionality
+        const fileUpload = document.getElementById('fileUpload');
+        const attachmentButton = document.getElementById('attachmentButton');
+        const uploadButton = document.getElementById('uploadButton');
+        const fileStatus = document.getElementById('fileStatus');
+        const fileName = document.getElementById('fileName');
+        const fileSize = document.getElementById('fileSize');
+        const progress = document.getElementById('progress');
+        const progressBar = document.getElementById('progressBar');
+        const uploadProgress = document.getElementById('uploadProgress');
+        const cancelUpload = document.getElementById('cancelUpload');
+        let currentFile = null;
+
+        // Trigger file selection
+        uploadButton.addEventListener('click', () => fileUpload.click());
+        attachmentButton.addEventListener('click', () => fileUpload.click());
+        
+        fileUpload.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            
+            // Check file size (50MB limit)
+            if (file.size > 50 * 1024 * 1024) {
+                alert('File size exceeds 50MB limit');
+                return;
+            }
+            
+            currentFile = file;
+            
+            // Update UI
+            fileName.textContent = file.name;
+            fileSize.textContent = formatFileSize(file.size) + '/50MB';
+            fileStatus.classList.remove('hidden');
+            
+            // Simulate upload progress
+            let progressValue = 0;
+            const uploadInterval = setInterval(() => {
+                progressValue += Math.random() * 10;
+                if (progressValue >= 100) {
+                    progressValue = 100;
+                    clearInterval(uploadInterval);
+                    uploadProgress.classList.add('hidden');
+                    
+                    // Send file message after upload completes
+                    setTimeout(() => {
+                        addFileMessage(file);
+                        fileStatus.classList.add('hidden');
+                    }, 500);
+                }
+                uploadProgress.classList.remove('hidden');
+                uploadProgress.querySelector('span').textContent = Math.round(progressValue);
+                progress.style.width = `${progressValue}%`;
+            }, 300);
+        });
+        
+        cancelUpload.addEventListener('click', () => {
+            fileStatus.classList.add('hidden');
+            fileUpload.value = '';
+            currentFile = null;
+        });
+        
+        function formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + 'B';
+            else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
+            else return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
+        }
+        
+        function addFileMessage(file) {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            const currentUser = localStorage.getItem('currentUser') || 'You';
+            
+            const fileMessage = document.createElement('div');
+            fileMessage.className = 'message-enter flex space-x-3';
+            fileMessage.innerHTML = `
+                <div class="flex-shrink-0">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-orange-400 flex items-center justify-center text-white font-bold">
+                        ${currentUser.charAt(0).toUpperCase()}
+                    </div>
+                </div>
+                <div>
+                    <div class="flex items-baseline space-x-2">
+                        <span class="font-semibold text-red-300">${currentUser}</span>
+                        <span class="text-xs text-gray-400">${timeString}</span>
+                    </div>
+                    <div class="mt-1 max-w-xs bg-gray-700 rounded-lg p-3">
+                        <div class="flex items-center space-x-2">
+                            <i class="fas ${getFileIcon(file)} text-purple-400"></i>
+                            <div class="flex-1 min-w-0">
+                                <p class="text-sm font-medium truncate">${file.name}</p>
+                                <p class="text-xs text-gray-400">${formatFileSize(file.size)}</p>
+                            </div>
+                        </div>
+                        <a href="#" class="mt-2 inline-block text-sm text-purple-400 hover:text-purple-300">
+                            <i class="fas fa-download mr-1"></i> Download
+                        </a>
+                    </div>
+                </div>
+            `;
+            
+            messagesContainer.appendChild(fileMessage);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+        
+        function getFileIcon(file) {
+            const type = file.type.split('/')[0];
+            if (type === 'image') return 'fa-image';
+            if (type === 'video') return 'fa-video';
+            if (type === 'audio') return 'fa-music';
+            if (file.name.match(/\.(pdf)$/i)) return 'fa-file-pdf';
+            if (file.name.match(/\.(docx?)$/i)) return 'fa-file-word';
+            if (file.name.match(/\.(xlsx?)$/i)) return 'fa-file-excel';
+            return 'fa-file';
+        }
+
         // Mobile sidebar toggle
         mobileSidebarToggle.addEventListener('click', () => {
             sidebar.classList.toggle('hidden');