Update static/application.js

static/application.js

@@ -7,20 +7,38 @@ document.addEventListener("DOMContentLoaded", () => {
 
   let selectedFile = null;
   let filePreviewBubble = null;
-
-  // Hidden file input
-  const fileInput = document.createElement("input");
-  fileInput.type = "file";
-  fileInput.accept = ".pdf,.docx,.pptx,.xlsx,image/*";
-  fileInput.style.display = "none";
-  document.body.appendChild(fileInput);
-
-  fileBtn.addEventListener("click", () => fileUpload.click());
-  imageBtn.addEventListener("click", () => imageUpload.click());
-
-  fileInput.addEventListener("change", () => {
-    const file = fileInput.files[0];
-    if (file) {
+// Hidden file inputs
+const fileUpload = document.getElementById('file-upload');
+const imageUpload = document.getElementById('image-upload');
+
+// Create separate input elements for documents and images
+const docInput = document.createElement("input");
+docInput.type = "file";
+docInput.accept = ".pdf,.docx,.pptx,.xlsx";
+docInput.style.display = "none";
+document.body.appendChild(docInput);
+
+const imgInput = document.createElement("input");
+imgInput.type = "file";
+imgInput.accept = "image/*";
+imgInput.style.display = "none";
+document.body.appendChild(imgInput);
+
+fileBtn.addEventListener("click", () => docInput.click());
+imageBtn.addEventListener("click", () => imgInput.click());
+
+// Document input handler
+docInput.addEventListener("change", (e) => {
+  if (e.target.files.length > 0) {
+    const file = e.target.files[0];
+    const validDocTypes = [
+      'application/pdf',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    ];
+    
+    if (validDocTypes.includes(file.type)) {
       selectedFile = file;
       if (filePreviewBubble) filePreviewBubble.remove();
 
@@ -29,41 +47,38 @@ document.addEventListener("DOMContentLoaded", () => {
       filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
       convo.appendChild(filePreviewBubble);
       convo.scrollTop = convo.scrollHeight;
+    } else {
+      alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
+      docInput.value = ''; // Reset the input
     }
-  });
-  fileUpload.addEventListener('change', (e) => {
-      if (e.target.files.length > 0) {
-        const file = e.target.files[0];
-        const validDocTypes = [
-          'application/pdf',
-          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-          'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-        ];
-        
-        if (validDocTypes.includes(file.type)) {
-          console.log('Valid document selected:', file.name);
-          // Handle the document file here
-        } else {
-          alert('Please select a valid document (PDF, DOCX, PPTX, or XLSX)');
-          fileUpload.value = ''; // Reset the input
-        }
-      }
-    });
-  imageUpload.addEventListener('change', (e) => {
-      if (e.target.files.length > 0) {
-        const file = e.target.files[0];
-        const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-        
-        if (validImageTypes.includes(file.type)) {
-          console.log('Valid image selected:', file.name);
-          // Handle the image file here
-        } else {
-          alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
-          imageUpload.value = ''; // Reset the input
-        }
-      }
-    });
+  }
+});
+
+// Image input handler
+imgInput.addEventListener("change", (e) => {
+  if (e.target.files.length > 0) {
+    const file = e.target.files[0];
+    const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    
+    if (validImageTypes.includes(file.type)) {
+      selectedFile = file;
+      if (filePreviewBubble) filePreviewBubble.remove();
+
+      filePreviewBubble = document.createElement("div");
+      filePreviewBubble.className = "file-preview-bubble bubble right";
+      filePreviewBubble.textContent = `🖼️ Selected: ${file.name}`;
+      convo.appendChild(filePreviewBubble);
+      convo.scrollTop = convo.scrollHeight;
+    } else {
+      alert('Please select a valid image (JPEG, PNG, GIF, or WEBP)');
+      imgInput.value = ''; // Reset the input
+    }
+  }
+});
+
+// Remove the old event listeners since we're using the new inputs
+fileUpload.removeEventListener('change');
+imageUpload.removeEventListener('change');
   function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
     const bubble = document.createElement("div");
     bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;