Merge pull request #1374 from solliancenet/jdh-update-release-0.8.0-f…

…ile-uploads (0.8.0) Chat file upload improvements
solliancenet · Aug 8, 2024 · 5c85640 · 5c85640
2 parents 99e5719 + fd98a21
commit 5c85640
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 32 deletions.
diff --git a/src/ui/UserPortal/components/ChatInput.vue b/src/ui/UserPortal/components/ChatInput.vue
@@ -63,6 +63,7 @@
 					:file-limit="1"
 					:auto="false"
 					:custom-upload="true"
+					:max-file-size="512000000"
 					@uploader="handleUpload"
 				>
 					<template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
@@ -93,48 +94,49 @@
 					</template>
 
 					<template #content="{ files, removeFileCallback }">
-						<div class="flex flex-wrap gap-4">
+						<div v-if="files.length || uploadProgress !== 0">
+							<ProgressBar :value="uploadProgress" :showValue="false" style="display: flex; width: 95%; margin: 10px 2.5%;" />
+						</div>
+						<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
-								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;
+									flex: 1;
 									display: flex;
 									flex-direction: row;
-									justify-content: space-between;
-									padding: 0.5rem;
-									width: 100%;
 									align-items: center;
+									gap: 10px;
 								"
 							>
-								<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"
-									text
-									severity="danger"
-									@click="removeFileCallback(index)"
-								/>
+								<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"
+								text
+								severity="danger"
+								@click="removeFileCallback(index)"
+							/>
 						</div>
 					</template>
 
 					<template #empty>
-						<div>
+						<div v-if="uploadProgress === 0">
 							<i class="pi pi-cloud-upload file-upload-icon" />
 							<div style="width: 500px">
 								<p style="text-align: center">
@@ -146,6 +148,9 @@
 								</p>
 							</div>
 						</div>
+						<div v-else>
+							<p style="text-align: center">Uploading...</p>
+						</div>
 					</template>
 				</FileUpload>
 				<ConfirmDialog></ConfirmDialog>
@@ -227,6 +232,7 @@ export default {
 			primaryButtonText: this.$appConfigStore.primaryButtonText,
 			secondaryButtonBg: this.$appConfigStore.secondaryButtonBg,
 			secondaryButtonText: this.$appConfigStore.secondaryButtonText,
+			uploadProgress: 0,
 		};
 	},
 
@@ -292,6 +298,7 @@ export default {
 		},
 
 		async handleUpload(event: any) {
+			this.uploadProgress = 70;
 			try {
 				const formData = new FormData();
 				formData.append('file', event.files[0]);
@@ -309,6 +316,7 @@ export default {
 					life: 5000,
 				});
 				this.showFileUploadDialog = false;
+				this.uploadProgress = 0;
 			} catch (error) {
 				this.$toast.add({
 					severity: 'error',
@@ -332,6 +340,7 @@ export default {
 		},
 
 		uploadFile(uploadCallback) {
+			this.uploadProgress = 0;
 			if (this.fileArrayFiltered.length) {
 				this.$confirm.require({
 					message: 'Uploading a new file will replace the file already attached.',
@@ -352,12 +361,10 @@ export default {
 					},
 					reject: () => {
 						uploadCallback();
-						this.showFileUploadDialog = false;
 					},
 				});
 			} else {
 				uploadCallback();
-				this.showFileUploadDialog = false;
 			}
 		},
 

diff --git a/src/ui/UserPortal/plugins/primevue.ts b/src/ui/UserPortal/plugins/primevue.ts
@@ -17,6 +17,7 @@ import Badge from 'primevue/badge';
 import BadgeDirective from 'primevue/badgedirective';
 import ConfirmDialog from 'primevue/confirmdialog';
 import ConfirmationService from 'primevue/confirmationservice';
+import ProgressBar from 'primevue/progressbar';
 
 import { defineNuxtPlugin } from '#app';
 
@@ -37,6 +38,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.vueApp.component('Badge', Badge);
 	nuxtApp.vueApp.directive('badge', BadgeDirective);
 	nuxtApp.vueApp.component('ConfirmDialog', ConfirmDialog);
+	nuxtApp.vueApp.component('ProgressBar', ProgressBar);
 
 	nuxtApp.vueApp.use(ConfirmationService);