Files send as ArrayBuffer

index.js

@@ -9,6 +9,8 @@ const io = new Server(server);
 const bodyParser = require('body-parser');
 const registerRoute = require('./routes/register');
 const loginRoute = require('./routes/login');
+const fs = require('fs');
+//import { writeFile } from "fs";
 
 //DB Connection
 mongoose.connect("mongodb://127.0.0.1:27017/cloudComputing");
@@ -35,8 +37,6 @@ app.get('/login', (req, res) => {
   res.sendFile(__dirname + '/views/login.html');
 });
 
-io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' }); // This will emit the event to all connected sockets
-
 io.on('connection', (socket) => {
   console.log('a user connected');
   socket.on('disconnect', () => {
@@ -48,26 +48,27 @@ io.on('connection', (socket) => {
   socket.broadcast.emit('hi');
 });
 
+//Takes 'chat message' event on Web Socket Connection. Sends Message Back to Client by using emit() function
 io.on('connection', (socket) => {
   socket.on('chat message', (msg) => {
     io.emit('chat message', msg);
   });
 });
 
+//Logs message from Socket to Console
 io.on('connection', (socket) => {
   socket.on('chat message', (msg) => {
     console.log('message: ' + msg);
   });
 });
 
+io.on("connection", (socket) => {
+  socket.on("upload", (file, callback) => {
+    console.log(file);
+    io.emit("upload", file);
+  });
+});
+
 server.listen(3000, () => {
   console.log('listening on Port :3000');
 });
\ No newline at end of file
-
-/* 
-ToDo:
-- Wenn User bereits existiert Fehler Code senden
-- LogIn: Wenn falscher Name, Fehlercode senden
-- Frontend files (Views) mit fetch() Daten an Backend senden
-- Frontend Files (Views) routen
-*/
\ No newline at end of file

node_modules/.package-lock.json

@@ -654,6 +654,11 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/fs": {
+            "version": "0.0.1-security",
+            "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+            "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+        },
         "node_modules/fs-minipass": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",

package-lock.json

@@ -11,6 +11,7 @@
                 "bcrypt": "^5.1.0",
                 "body-parser": "^1.20.1",
                 "express": "^4.18.2",
+                "fs": "*",
                 "http": "*",
                 "jsonwebtoken": "^8.5.1",
                 "mongoose": "^6.6.7",
@@ -668,6 +669,11 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/fs": {
+            "version": "0.0.1-security",
+            "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+            "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+        },
         "node_modules/fs-minipass": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -2509,6 +2515,11 @@
             "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
             "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
         },
+        "fs": {
+            "version": "0.0.1-security",
+            "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+            "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+        },
         "fs-minipass": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",

package.json

@@ -9,6 +9,7 @@
         "bcrypt": "^5.1.0",
         "body-parser": "^1.20.1",
         "express": "^4.18.2",
+        "fs": "*",
         "http": "*",
         "jsonwebtoken": "^8.5.1",
         "mongoose": "^6.6.7",

views/index.html

@@ -20,6 +20,7 @@
     <form id="form" action="">
       <input id="input" autocomplete="off" /><button>Send</button>
     </form>
+    <input id="file" type="file"/>
     <script src="/socket.io/socket.io.js"></script>
     <script>
       var socket = io();
@@ -27,21 +28,42 @@
       var messages = document.getElementById('messages');
       var form = document.getElementById('form');
       var input = document.getElementById('input');
+      var fileUpload = document.getElementById("file");
 
+
+      //Event Listener to trigger emit function. Sends 'chat message' event and Message to Server
       form.addEventListener('submit', function(e) {
         e.preventDefault();
+        upload(fileUpload.files);
         if (input.value) {
           socket.emit('chat message', input.value);
           input.value = '';
         }
       });
       
+      //Appends message to HTML list so every client sees message in Frontend
       socket.on('chat message', function(msg) {
         var item = document.createElement('li');
         item.textContent = msg;
         messages.appendChild(item);
         window.scrollTo(0, document.body.scrollHeight);
       });
+
+      function upload(files) {
+        console.log(typeof(files[0]));
+        var fileObject = files[0];
+        console.log(fileObject);
+        var URL = URL.createObjectURL(fileObject);
+        //console.log(URL);
+        socket.emit("upload", files[0], (status) => {
+          console.log(status);
+        });
+      }
+
+      socket.on('upload', function(file) {
+        console.log(file);
+      })
+
     </script>
   </body>
 </html>
\ No newline at end of file

views/register.html

@@ -23,7 +23,6 @@
             async function submitRegistrationData(event) {
                 
                 event.preventDefault();
-                console.log("submit");
          
                 var username = document.getElementById("username").value;
                 var password = document.getElementById("password").value;