diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue
index f28a92fec0..85cb6ae57b 100644
--- a/src/ui/UserPortal/components/ChatInput.vue
+++ b/src/ui/UserPortal/components/ChatInput.vue
@@ -49,17 +49,37 @@
 			</OverlayPanel>
 			<Dialog v-model:visible="showFileUploadDialog" header="Upload File" modal aria-label="File Upload Dialog">
 				<FileUpload
-					accept="audio/mpeg,audio/wav"
-					:auto="true"
+					:auto="false"
 					:custom-upload="true"
 					@uploader="handleUpload"
 					ref="fileUpload"
+					:fileLimit="1"
 				>
-					<template #header>
-						File Uploader
+					<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
+						<div>
+							<div class="upload-files-header">
+								<Button @click="chooseCallback()" icon="pi pi-images" label="Choose" :disabled="files.length !== 0" style="margin-right: .5rem"></Button>
+								<Button @click="uploadFile(uploadCallback)" icon="pi pi-cloud-upload" label="Upload" :disabled="!files || files.length === 0" style="margin-right: .5rem"></Button>
+								<Button @click="clearCallback()" icon="pi pi-times" label="Cancel" :disabled="!files || files.length === 0"></Button>
+							</div>
+						</div>
+					</template>
+
+					<template #content="{ files, removeFileCallback }">
+						<div class="flex flex-wrap gap-4">
+							<div v-for="(file, index) of files" :key="file.name + file.type + file.size" style="border-color: rgb(226, 232, 240); border-radius: 6px; border-style: solid; border-width: 1px; display: flex; flex-direction: row; justify-content: space-between; padding: 0.5rem; width: 100%; align-items: center;">
+								<div style="flex: 1; display: flex; flex-direction: row; align-items: center; gap: 10px">
+									<i class="pi pi-file" style="font-size: 2rem; margin-right: 1rem;"></i>
+									<span style="font-weight: 600;">{{ file.name }}</span>
+									<div>{{ formatSize(file.size) }}</div>
+								</div>
+								<Button icon="pi pi-times" @click="removeFileCallback(index)" text severity="danger" style=""/>
+							</div>
+						</div>
 					</template>
-					<template #content>
-						<div class="">
+
+					<template #empty>
+						<div>
 							<i class="pi pi-cloud-upload file-upload-icon" />
 							<div style="width: 500px">
 								<p style="text-align: center;">
@@ -73,6 +93,7 @@
 						</div>
 					</template>
 				</FileUpload>
+				<ConfirmDialog></ConfirmDialog>
 			</Dialog>
 			<Mentionable
 				:keys="['@']"
@@ -234,6 +255,49 @@ export default {
 		browseFiles() {
 			this.$refs.fileUpload.$el.querySelector('input[type="file"]').click();
 		},
+
+		uploadFile(uploadCallback) {
+			if (this.$appStore.attachments.length) {
+				this.$confirm.require({
+					message: 'Uploading a new file will replace the file already attached.',
+					header: 'Confirm File Replacement',
+					icon: 'pi pi-exclamation-triangle',
+					rejectProps: {
+						label: 'Cancel',
+						severity: 'secondary',
+						outlined: true
+					},
+					acceptProps: {
+						label: 'Upload'
+					},
+					accept: () => {
+						uploadCallback();
+						this.showFileUploadDialog = false;
+					},
+					reject: () => {
+						this.showFileUploadDialog = false;
+					}
+				});
+			} else {
+				uploadCallback();
+				this.showFileUploadDialog = false;
+			}
+		},
+
+		formatSize(bytes) {
+            const k = 1024;
+            const dm = 3;
+            const sizes = this.$primevue.config.locale.fileSizeTypes;
+
+            if (bytes === 0) {
+                return `0 ${sizes[0]}`;
+            }
+
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+            return `${formattedSize} ${sizes[i]}`;
+        }
 	},
 };
 </script>
@@ -353,6 +417,10 @@ export default {
 	border-top-left-radius: 6px;
 	border-top-right-radius: 6px;
 }
+
+.upload-files-header {
+	width: 500px;
+}
 </style>
 
 <style lang="scss">
@@ -381,8 +449,4 @@ export default {
 	font-size: 5rem;
     color: #000;
 }
-
-.p-fileupload-buttonbar {
-	display: none;
-}
 </style>
diff --git a/src/ui/UserPortal/plugins/primevue.ts b/src/ui/UserPortal/plugins/primevue.ts
index b18aed897f..f674d717a7 100644
--- a/src/ui/UserPortal/plugins/primevue.ts
+++ b/src/ui/UserPortal/plugins/primevue.ts
@@ -15,6 +15,8 @@ import FileUpload from 'primevue/fileupload';
 import OverlayPanel from 'primevue/overlaypanel';
 import Badge from 'primevue/badge';
 import BadgeDirective from 'primevue/badgedirective';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ConfirmationService from 'primevue/confirmationservice';
 
 import { defineNuxtPlugin } from '#app';
 
@@ -34,6 +36,9 @@ export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.vueApp.component('OverlayPanel', OverlayPanel);
 	nuxtApp.vueApp.component('Badge', Badge);
 	nuxtApp.vueApp.directive('badge', BadgeDirective);
+	nuxtApp.vueApp.component('ConfirmDialog', ConfirmDialog);
+
+	nuxtApp.vueApp.use(ConfirmationService);
 
 	nuxtApp.vueApp.use(ToastService);
 	nuxtApp.vueApp.directive('tooltip', Tooltip);