Update static/application.js

static/application.js

@@ -15,8 +15,8 @@ document.addEventListener("DOMContentLoaded", () => {
   fileInput.style.display = "none";
   document.body.appendChild(fileInput);
 
-  fileBtn.addEventListener("click", () => fileInput.click());
-  imageBtn.addEventListener("click", () => fileInput.click());
+  fileBtn.addEventListener("click", () => fileUpload.click());
+  imageBtn.addEventListener("click", () => imageUpload.click());
 
   fileInput.addEventListener("change", () => {
     const file = fileInput.files[0];
@@ -31,7 +31,39 @@ document.addEventListener("DOMContentLoaded", () => {
       convo.scrollTop = convo.scrollHeight;
     }
   });
-
+  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
+        }
+      }
+    });
   function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
     const bubble = document.createElement("div");
     bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;