Update static/application.js

static/application.js

@@ -116,6 +116,53 @@ async function handleSubmit() {
 }
 */
 // frontend.js
+const inputField = document.querySelector(".qt input");
+const icons = document.querySelectorAll(".icons i");
+const convo = document.querySelector(".convo");
+const send = document.querySelector(".sendingQA");
+
+const imageInput = document.createElement("input");
+imageInput.type = "file";
+imageInput.accept = "image/*";
+imageInput.style.display = "none";
+
+const docInput = document.createElement("input");
+docInput.type = "file";
+docInput.accept = ".pdf,.docx,.pptx,.xlsx";
+docInput.style.display = "none";
+
+document.body.appendChild(imageInput);
+document.body.appendChild(docInput);
+
+let selectedFile = null;
+let selectedType = null;
+
+icons[0].addEventListener("click", () => imageInput.click());
+icons[1].addEventListener("click", () => docInput.click());
+send.addEventListener("click", handleSubmit);
+
+imageInput.addEventListener("change", () => {
+  selectedFile = imageInput.files[0];
+  selectedType = "Image";
+  showSelectedFile(selectedFile.name, "🖼️");
+});
+
+docInput.addEventListener("change", () => {
+  selectedFile = docInput.files[0];
+  selectedType = "Document";
+  showSelectedFile(selectedFile.name, "📄");
+});
+
+function showSelectedFile(fileName, icon) {
+  const fileNotice = document.createElement("div");
+  fileNotice.style.padding = "0.8rem";
+  fileNotice.style.backgroundColor = "#f3f3f3";
+  fileNotice.style.borderRadius = "10px";
+  fileNotice.style.margin = "1rem";
+  fileNotice.innerHTML = `${icon} <strong>Selected file:</strong> ${fileName}`;
+  convo.appendChild(fileNotice);
+}
+
 async function handleSubmit() {
   const question = inputField.value.trim();
   if (!question && !selectedFile) {
@@ -127,7 +174,6 @@ async function handleSubmit() {
   formData.append("question", question);
   formData.append("file", selectedFile);
 
-  // Show user question
   const userBlock = document.createElement("div");
   userBlock.className = "user-block";
   userBlock.innerHTML = `
@@ -136,7 +182,6 @@ async function handleSubmit() {
   `;
   convo.appendChild(userBlock);
 
-  // Loading message
   const loadingBlock = document.createElement("div");
   loadingBlock.className = "loading-block";
   loadingBlock.innerText = "Processing your request...";
@@ -151,7 +196,6 @@ async function handleSubmit() {
     const result = await response.json();
     loadingBlock.remove();
 
-    // Answer block with optional audio
     const answerBlock = document.createElement("div");
     answerBlock.className = "answer-block";
     answerBlock.innerHTML = `
@@ -165,7 +209,6 @@ async function handleSubmit() {
     `;
     convo.appendChild(answerBlock);
 
-    // Handle audio toggle
     const audioIcon = answerBlock.querySelector(".audio-toggle");
     const audioElement = answerBlock.querySelector("audio");