First idea on sending a single file

Author: Alexandros Semelidis

src/client/public/index.js

@@ -121,6 +121,16 @@ $(function onload() {
 				showUsers();
 				break;
 			}
+			case 'sendFilesResp': {
+				const data = objData.d;
+				const encoder = new TextEncoder();
+				const uint8Array = encoder.encode(data[0].fileData);
+				const url = URL.createObjectURL(new Blob([uint8Array]));
+				const tEl = `<a href="${url}" download="${data[0].fileName}"></a>`;
+				chatWriteLine(`${username}: ${tEl}`);
+				txtMessage.val('').focus();
+				break;
+			}
 			case 'join': {
 				const username = objData.d;
 				chatWriteLine(`User connect (${username})`);
@@ -178,20 +188,19 @@ $(function onload() {
 		}
 	});
 
-	btnSendFiles.click(() => {
+	btnSendFiles.click(async () => {
 		const lFiles = document.getElementById('btnUpload').files;
 		if (lFiles.length > 0) {
-			const reader = new FileReader();
 			const decoder = new TextDecoder('utf-8');
-			const lFileString = [];
-			reader.onload = (e) => {
-				lFileString.push(
-					decoder.decode(new Uint8Array(e.target.result))
-				);
-			};
-			for (let i = 0, l = lFiles.length; i < l; i++) {
-				reader.readAsArrayBuffer(lFiles[i]);
-			}
+			const tArrBuffer = await lFiles[0].arrayBuffer();
+			const fileData = decoder.decode(new Uint8Array(tArrBuffer));
+			const fileName = btnUpload.val().split('\\').pop();
+			const lFileString = [
+				{
+					fileData,
+					fileName,
+				},
+			];
 			ws.send(
 				JSON.stringify({
 					h: 'sendFiles',

src/server/WebSocket.ts

@@ -25,7 +25,10 @@ type WSMsgJoin = { h: 'join'; d: string };
 type WSMsgLeave = { h: 'leave'; d: string };
 type WSMsgChat = { h: 'chat'; s: string; d: string };
 type WSMsgGetUsers = { h: 'getUsers' };
-type WSMsgSendFiles = { h: 'sendFiles'; d: Array<string> };
+type WSMsgSendFiles = {
+	h: 'sendFiles';
+	d: Array<{ fileData: string; fileName: string }>;
+};
 type WSMessageClient =
 	| WSMsgJoin
 	| WSMsgLeave
@@ -41,12 +44,17 @@ type WSMsgGetUsersResp = {
 	h: 'getUsersResp';
 	userList: Array<string>;
 };
+type WSMsgSendFilesResp = {
+	h: 'sendFilesResp';
+	d: Array<{ fileData: string; fileName: string }>;
+};
 type WSMessageServer =
 	| WSMsgConnectResp
 	| WSMsgJoinResp
 	| WSMsgLeaveResp
 	| WSMsgChatResp
-	| WSMsgGetUsersResp;
+	| WSMsgGetUsersResp
+	| WSMsgSendFilesResp;
 
 type WSMessage = WSMessageClient | WSMessageServer;
 
@@ -100,6 +108,7 @@ export async function HandleWSConn(pWebSocket: WebSocket): Promise<void> {
 						break;
 					}
 					case 'sendFiles': {
+						await RespondSendFiles(_connInfo, objEvent.d);
 						break;
 					}
 					default: {
@@ -172,6 +181,16 @@ async function RespondGetUsers(pConnInfo: ConnInfo) {
 	});
 }
 
+async function RespondSendFiles(
+	pConnInfo: ConnInfo,
+	pData: Array<{ fileData: string; fileName: string }>
+) {
+	return Respond(pConnInfo, {
+		h: 'sendFilesResp',
+		d: pData,
+	});
+}
+
 function BroadcastJoin(pSrcInfo: ConnInfo) {
 	const { id: _SenderId, conn: _SenderConn } = pSrcInfo;
 	const { name: _SenderName } = _SenderConn;