Add a feedback when uploading a file

assets/js/components/conversations/fileUploadProgress.js

@@ -0,0 +1,50 @@
+/**
+ * Conversation file upload progress
+ * 
+ * Show a progress bar letting the user know when
+ * is file is sent.
+ * 
+ * @author Pierre Hubert
+ */
+
+class FileUploadProgress {
+
+    /**
+     * Initialise a new progress bar
+     * 
+     * @param {HTMLElement} target 
+     */
+    constructor(target) {
+        const progressContainerElem = createElem2({
+            appendTo: target,
+            type: "div",
+            class: "progress progress-xs progress-striped active"
+        });
+        progressContainerElem.style.marginBottom = "0px"
+
+        this.progresselem = createElem2({
+            appendTo: progressContainerElem,
+            type: "div",
+            class: "progress-bar progress-bar-success",
+        })
+
+        this.setProgress(0)
+    }
+
+    /**
+     * Apply a new progress
+     * 
+     * @param {number} progress Between 0 and 1
+     */
+    setProgress(progress) {
+        this.progresselem.style.width = Math.floor(progress*100) + "%"
+    }
+
+    /**
+     * Remove the progress element
+     * from the page
+     */
+    remove() {
+        this.progresselem.parentNode.remove()
+    }
+}

assets/js/components/conversations/interface.js

@@ -237,8 +237,9 @@ const ConversationsInterface = {
 	 * @param {number} convID The ID of the conversation
 	 * @param {string} message The message to send (if not a file)
 	 * @param {HTMLInputElement} file The file to send (if any)
+	 * @param {(number) => void} progress Optional progress callback (if a file is sent)
 	 */
-	sendMessage: async function(convID, message, file){
+	sendMessage: async function(convID, message, file, progress){
 
 		//Perform an API request
 		var apiURI = "conversations/sendMessage";
@@ -264,7 +265,7 @@ const ConversationsInterface = {
 			fd.append("file", file.files[0], file.files[0].name);
 
 			//Perform an API request
-			await APIClient.execFormData(apiURI, fd, true);
+			await APIClient.execFormData(apiURI, fd, true, progress);
 		}
 	},
 

assets/js/components/conversations/utils.js

@@ -228,7 +228,7 @@ const ConversationsUtils = {
 	 * @param {HTMLInputElement} input 
 	 * @param {HTMLElement} target 
 	 */
-	registerInputToSendFile: function(convID, fileInput, splashScreenTarget){
+	registerInputToSendFile: function(convID, fileInput, progressTarget){
 		fileInput.addEventListener("change", async (e) => {
 			e.preventDefault();
 			
@@ -252,9 +252,10 @@ const ConversationsUtils = {
 					return;
 				}
 
-				el = Page.showTransparentWaitSplashScreen(splashScreenTarget);
+				el = new FileUploadProgress(progressTarget);
 
-				await ConversationsInterface.sendMessage(convID, null, fileInput);
+
+				await ConversationsInterface.sendMessage(convID, null, fileInput, (progress) => el.setProgress(progress));
 			}
 
 			catch(e) {
@@ -262,7 +263,7 @@ const ConversationsUtils = {
 				notify(tr("Failed to send file!"), "danger");
 			}
 
-			el.remove();
+			el.remove()
 
 		});
 	},