Send images in chat via FileReader+base64 Encoding.

public/index.css

@@ -154,6 +154,11 @@ label {
 #send-message {
   position: relative;
 }
+
+#send-message>div {
+  text-align: center;
+}
+
 #send-message input {
   border: none;
   height: 40px;
@@ -173,15 +178,14 @@ label {
   outline: 0;
 }
 
-#send-message button {
-  margin: 20px 0 20px -55px;
-  left: 50%;
-  width: 110px;
+#send-message button{
+  line-height: 22px;
+  margin: 20px 0;
   position: relative;
+  width: 110px;
 }
 
-button {
-  margin: 0;
+button, div.filebutton {
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -199,13 +203,34 @@ button {
   text-align: center;
   text-shadow: 0 1px 1px #006679;
   cursor: pointer;
+  padding: 2px 0 2px 0;
+  line-height: 1;
 }
-button:hover,
-button.hover,
+button:hover, div.filebutton:hover,
+button.hover, div.filebutton.hover,
 button:active,
-button:focus {
+button:focus, {
   background: #009cb8;
   box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7),
              inset 0 0 10px #007287;
 }
 
+div.filebutton {
+  line-height: 24px;
+  margin: -7px 0;
+  overflow: hidden;
+  padding: 2px 0;
+  position: relative;
+  width: 150px !important;
+}
+
+.filebutton input#imagefile {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+}
+

public/index.html

@@ -25,7 +25,10 @@ <h1>Node.js Chat Demo</h1>
       </div>
       <form id="send-message">
         <input id="message" type="text"/>
-        <button value="">Send</button>
+        <div>
+          <button value="" class="send">Send</button>
+          <div class="filebutton">Send Image<input type="file" id="imagefile" accept="image/*"></div>
+        </div>
       </form>
   </body>
 </html>

public/index.js

@@ -20,6 +20,7 @@
   });
 
   socket.on('user message', message);
+  socket.on('user image', image);
   socket.on('reconnect', function () {
     $('#lines').remove();
     message('System', 'Reconnected to the server');
@@ -37,6 +38,10 @@
     $('#lines').append($('<p>').append($('<b>').text(from), msg));
   }
 
+  function image (from, base64Image) {
+    $('#lines').append($('<p>').append($('<b>').text(from), '<img src="' + base64Image + '"/>'));
+  }
+
   //
   // dom manipulation code
   //
@@ -63,4 +68,15 @@
     function clear () {
       $('#message').val('').focus();
     };
+
+    $('#imagefile').bind('change', function(e){
+      var data = e.originalEvent.target.files[0];
+      var reader = new FileReader();
+      reader.onload = function(evt){
+        image('me', evt.target.result);
+        socket.emit('user image', evt.target.result);
+      };
+      reader.readAsDataURL(data);
+
+    });
   });

server/server.js

@@ -19,10 +19,14 @@
   io.sockets.on('connection', function (socket) {
 
     socket.on('user message', function (msg) {
-
       socket.broadcast.emit('user message', socket.nickname, msg);
     });
 
+    socket.on('user image', function (msg) {
+      console.log(msg);
+      socket.broadcast.emit('user image', socket.nickname, msg);
+    });
+
     socket.on('nickname', function (nick, fn) {
       if (nicknames[nick]) {