Can send files to conversations

assets/js/common/api.js

@@ -10,7 +10,7 @@ const APIClient = {
      * 
      * @returns {Promise}
      */
-    exec:  function(apiURI, args, withLogin){
+    exec: function(apiURI, args, withLogin) {
 
         if(!args)
             args = {};
@@ -29,6 +29,24 @@ const APIClient = {
         });
     },
 
+    /**
+     * @returns {Promise}
+     */
+    execFormData: function(uri, data, withLogin) {
+        if (!data)
+            data = new FormData();
+        
+        return new Promise((res, rej) => {
+            this.makeFormDatarequest(uri, data, withLogin, (result) => {
+                if (result.error)
+                    reject(result.error);
+                
+                else
+                    res(result);
+            })
+        });
+    },
+
     /**
      * Make an API request
      * 

assets/js/common/utils.js

@@ -834,3 +834,12 @@ function rpad(str, len, fill) {
 		str = fill + str
 	return str
 }
+
+/**
+ * Format file size to human readable format
+ * 
+ * @param {number} size The size to format
+ */
+function fileSizeToHuman(size) {
+	return Math.round(ServerConfig.conf.conversation_files_max_size/(1000*1000)*100)/100 + "MB";
+}

assets/js/components/conversations/interface.js

@@ -245,47 +245,37 @@ const ConversationsInterface = {
 	/**
 	 * Send a new message
 	 * 
-	 * @param {Object} infos Informations about the message to send
+	 * @param {number} convID The ID of the conversation
-	 * @info {Integer} conversationID The ID of the conversation
+	 * @param {string} message The message to send (if not a file)
-	 * @info {String} message The message to send
+	 * @param {HTMLInputElement} file The file to send (if any)
-	 * @info {HTMLElement} image Optionnal, input field with an image
-	 * @info {function} callback What to do once the image was successfully sent
-	 * @return {Boolean} true for a success
 	 */
-	sendMessage: function(infos){
+	sendMessage: async function(convID, message, file){
 
 		//Perform an API request
 		var apiURI = "conversations/sendMessage";
 
-		var hasImage = false;
+		// Check whether a file has to be sent or not
-		if(infos.image){
+		if(!file){
-			if(infos.image.files[0])
-				hasImage = true;
-		}
-
-		//Check wether an image has to be included or not
-		if(!hasImage){
 
 			//Prepare request
 			var params = {
-				message: infos.message,
+				message: message,
-				conversationID: infos.conversationID,
+				conversationID: convID,
 			};
 
 			//Perform an API request
-			ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, infos.callback);
+			await api(apiURI, params, true);
 		}
 
-		//If we have an image, we must do a formdata request
+		//If we have a file, we must do a formdata request
 		else {
 
 			var fd = new FormData();
-			fd.append("message", infos.message);
+			fd.append("conversationID", convID);
-			fd.append("conversationID", infos.conversationID);
+			fd.append("file", file.files[0], file.files[0].name);
-			fd.append("image", infos.image.files[0], infos.image.files[0].name);
 
 			//Perform an API request
-			ComunicWeb.common.api.makeFormDatarequest(apiURI, fd, true, infos.callback);
+			await APIClient.execFormData(apiURI, fd, true);
 		}
 	},
 

assets/js/pages/conversations/conversation.js

@@ -401,6 +401,82 @@ const ConversationPageConvPart = {
 			class: "input-group"
 		});
 
+
+		// ==== FILE INPUT ====
+
+		// File button group
+		let fileButtonGroup = createElem2({
+			appendTo: inputGroup,
+			type: "span",
+			class: "input-group-btn",
+		});
+
+		//Create image input (for optionnal image)
+		var fileInput = document.createElement("input");
+		fileInput.type = "file";
+		fileInput.accept = ServerConfig.conf.allowed_conversation_files_type.join(", ");
+
+		// Send file button
+		var fileButton = createElem2({
+			appendTo: fileButtonGroup,
+			type: "button",
+			elemType: "button",
+			class: "btn btn-flat btn-add-image",
+		});
+		fileButton.addEventListener("click", (e) => {
+			e.preventDefault();
+
+			//Call file selector
+			fileInput.click();
+		});
+		
+			//Add image icon
+			createElem2({
+				type: "i",
+				appendTo: fileButton, 
+				class: "fa fa-plus"
+			});
+		
+		fileInput.addEventListener("change", async (e) => {
+			e.preventDefault();
+			
+			let el;
+			
+			try {
+
+				if(fileInput.files.length == 0)
+					return;
+				
+				const file = fileInput.files[0];
+
+				if (ServerConfig.conf.allowed_conversation_files_type.indexOf(file.type) < 0) {
+					notify(tr("This file type is not allowed!"), "danger")
+					return;
+				}
+
+
+				if (file.size > ServerConfig.conf.conversation_files_max_size) {
+					notify(tr("This file is too big (max file size: %1%)", {"1": fileSizeToHuman(ServerConfig.conf.conversation_files_max_size)}), "danger");
+					return;
+				}
+
+				el = Page.showTransparentWaitSplashScreen();
+
+				await ConversationsInterface.sendMessage(this._conv_info.id, null, fileInput);
+			}
+
+			catch(e) {
+				console.error(e);
+				notify(tr("Failed to send file!"), "danger");
+			}
+
+			el.remove();
+
+		});
+		// ==== /FILE INPUT ====
+
+
+
 		//Create text input (for message)
 		var inputText = createElem2({
 			appendTo: inputGroup,
@@ -420,13 +496,6 @@ const ConversationPageConvPart = {
 			autosize: true,
 		});
 
-		//Create image input (for optionnal image)
-		var inputImage = createElem2({
-			type: "input",
-			elemType: "file",
-		});
-		
-
 		//Create button group
 		var buttonGroup = createElem2({
 			appendTo: inputGroup,
@@ -452,24 +521,6 @@ const ConversationPageConvPart = {
 		//Make emojie button lives
 		ComunicWeb.components.emoji.picker.addPicker(inputText, emojiButton);
 
-		//Add image button
-		var imageButton = createElem2({
-			appendTo: buttonGroup,
-			type: "button",
-			elemType: "button",
-			class: "btn btn-flat btn-add-image",
-		});
-		imageButton.onclick = function(){
-			//Call file selector
-			inputImage.click();
-		};
-		
-			//Add image icon
-			createElem2({
-				type: "i",
-				appendTo: imageButton, 
-				class: "fa fa-image"
-			});
 		
 		//Add send button
 		var sendButton = createElem2({
@@ -495,38 +546,37 @@ const ConversationPageConvPart = {
 		});
 
 		//Make form lives
-		formContainer.onsubmit = function(){
+		formContainer.addEventListener("submit", async (e) => {
+			e.preventDefault();
 
-			//Check if message is empty
+			try {
-			if(!checkString(inputText.value) && !inputImage.files[0]){
+				let message = inputText.value;
-				ComunicWeb.common.notificationSystem.showNotification("Please type a valid message before trying to send it !", "danger", 2);
+
-				return false;
+				//Check if message is empty
+				if(message.length > ServerConfig.conf.max_conversation_message_len 
+					|| message.length < ServerConfig.conf.min_conversation_message_len){
+					notify(tr("Invalid message length!"), "danger", 2);
+					return;
+				}
+
+				// Lock send button
+				sendButton.disabled = true;
+
+				//Send the message throught the interface
+				await ConversationsInterface.sendMessage(this._conv_info.id, message);
+
+				// Reset the form
+				inputText.value = "";
 			}
 
-			//Lock send button
+			catch(e) {
-			sendButton.disabled = true;
+				console.error(e);
+				notify("An error occurred while trying to send your message!", "danger");
+			}
 
-			//Send the message throught the interface
+			// Unlock send button
-			ComunicWeb.components.conversations.interface.sendMessage({
+			sendButton.disabled = false;
-				conversationID: ComunicWeb.pages.conversations.conversation._conv_info.id,
+		});
-				message: inputText.value,
-				image: inputImage,
-				callback: function(result){
-					
-					//Unlock send button
-					sendButton.disabled = false;
-
-					//Check for errors
-					if(result.error)
-						return notify("An error occurred while trying to send your message!", "danger");
-
-					//Reset the form
-					ComunicWeb.pages.conversations.conversation.addSendMessageForm();
-				}
-			});
-
-			return false;
-		}
 	},
 
 	/**

assets/js/typings/ServerConfig.d.ts

@@ -21,7 +21,7 @@ declare interface DataConservationPolicySettings {
     min_comments_lifetime: number,
     min_posts_lifetime: number,
     min_conversation_messages_lifetime: number,
-    min_likes_lifetime: number0
+    min_likes_lifetime: number
 }
 
 declare interface StaticServerConfig {
@@ -30,5 +30,10 @@ declare interface StaticServerConfig {
     play_store_url: string,
     android_direct_download_url: string,
     password_policy: PasswordPolicy,
-    data_conservation_policy: DataConservationPolicySettings;
+    data_conservation_policy: DataConservationPolicySettings,
+    
+    min_conversation_message_len: number,
+    max_conversation_message_len: number,
+    allowed_conversation_files_type: String[],
+    conversation_files_max_size: number,
 }