diff --git a/examples/server/public/index.html.gz b/examples/server/public/index.html.gz
index 711ccab9d..78cb80887 100644
Binary files a/examples/server/public/index.html.gz and b/examples/server/public/index.html.gz differ
diff --git a/examples/server/webui/index.html b/examples/server/webui/index.html
index 844abf54d..5f232afb5 100644
--- a/examples/server/webui/index.html
+++ b/examples/server/webui/index.html
@@ -173,12 +173,12 @@
         </div>
         <!-- section to display uploaded files -->
         <div class="flex flex-wrap">
-          <div v-for="(file, index) in uploadedFiles" :key="index" class="flex items-center mr-4 mb-2">
+          <div v-for="([fileName, text]) in Array.from(fileTextMap.entries())" :key="fileName" class="flex items-center mr-4 mb-2">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-blue-500">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 3.75v16.5m4.5-4.5H7.5M9 21h6a3 3 0 003-3V6a3 3 0 00-3-3H9a3 3 0 00-3 3v12a3 3 0 003 3z" />
             </svg>
-            <span class="text-sm ml-1">{{ file.name }}</span>
-            <button @click="removeFile(index)" class="ml-2 text-grey-500 hover:text-red-700">
+            <span class="text-sm ml-1">{{ fileName }}</span>
+            <button @click="removeFile(fileName)" class="ml-2 text-grey-500 hover:text-red-700">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
               </svg>
diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js
index 52a1d3c24..b218aa07c 100644
--- a/examples/server/webui/src/main.js
+++ b/examples/server/webui/src/main.js
@@ -392,8 +392,7 @@ const mainApp = createApp({
       viewingConvId: StorageUtils.getNewConvId(),
       inputMsg: '',
       isGenerating: false,
-      uploadedFiles: [],
-      fileText: '',
+      fileTextMap: new Map(),
       /** @type {Array<Message> | null} */
       pendingMsg: null, // the on-going message from assistant
       stopGeneration: () => {},
@@ -474,8 +473,8 @@ const mainApp = createApp({
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
     },
-    removeFile(index){
-      this.uploadedFiles.splice(index, 1);
+    removeFile(filename){
+      this.fileTextMap.delete(filename);
     },
     async handlePdfUpload(event) {
       const file = event.target.files[0];
@@ -488,8 +487,7 @@ const mainApp = createApp({
             console.log("PDF loaded:", pdfDocument);
             const pdfPromise = extractPdfText(file);
             pdfPromise.then((data) => {
-              this.uploadedFiles.push(file);
-              this.fileText += data;
+              this.fileTextMap.set(file.name, data);
             })
             .catch((error) => { 
               console.log(error)
@@ -507,16 +505,18 @@ const mainApp = createApp({
     async sendMessage() {
       if (!this.inputMsg) return;
       const currConvId = this.viewingConvId;
+      const fileTexts = await Promise.all([...this.fileTextMap.values()]);
+      const combinedFileText = fileTexts.join('\n');
 
       StorageUtils.appendMsg(currConvId, {
         id: Date.now(),
         role: 'user',
-        content: this.fileText + '\n' + this.inputMsg,
+        content: combinedFileText + '\n' + this.inputMsg,
       });
       this.fetchConversation();
       this.fetchMessages();
       this.inputMsg = '';
-      this.uploadedFiles = [];
+      this.fileTextMap.clear();
       this.fileText = '';
       this.generateMessage(currConvId);
       chatScrollToBottom();