From 7dfadfa3d41df3238e4c8d78894adccdb388e4bd Mon Sep 17 00:00:00 2001
From: Massimiliano Marcon <me@marcon.me>
Date: Wed, 5 Sep 2012 19:25:55 +0200
Subject: [PATCH 1/2] Send images in chat.

---
 public/index.css  | 29 +++++++++++++++++++++++++----
 public/index.html |  5 ++++-
 public/index.js   | 16 ++++++++++++++++
 server/server.js  |  6 +++++-
 4 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/public/index.css b/public/index.css
index 917e829..5a4d6ac 100644
--- a/public/index.css
+++ b/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,14 +178,13 @@ label {
   outline: 0;
 }
 
-#send-message button {
-  margin: 20px 0 20px -55px;
-  left: 50%;
+#send-message button, div.filebutton {
+  margin: 20px 0;
   width: 110px;
   position: relative;
 }
 
-button {
+button, div.filebutton {
   margin: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -209,3 +213,20 @@ button:focus {
              inset 0 0 10px #007287;
 }
 
+div.filebutton {
+  padding: 2px 0 3px 0;
+  position: relative;
+  overflow: hidden;
+  width: 150px !important;
+}
+
+.filebutton input#imagefile {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+}
+
diff --git a/public/index.html b/public/index.html
index f5261e3..225479e 100644
--- a/public/index.html
+++ b/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>
diff --git a/public/index.js b/public/index.js
index 86cfc9e..6d6abad 100644
--- a/public/index.js
+++ b/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);
+      
+    });
   });
diff --git a/server/server.js b/server/server.js
index 93d7cc4..74c5d44 100644
--- a/server/server.js
+++ b/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]) {
 

From 03faacc3c3b5edfd0db43b7e3a0e41bfede06bdf Mon Sep 17 00:00:00 2001
From: Massimiliano Marcon <me@marcon.me>
Date: Thu, 6 Sep 2012 00:47:25 +0200
Subject: [PATCH 2/2] Image post: style fixes.

---
 public/index.css | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/public/index.css b/public/index.css
index 5a4d6ac..57729b7 100644
--- a/public/index.css
+++ b/public/index.css
@@ -155,7 +155,7 @@ label {
   position: relative;
 }
 
-#send-message div {
+#send-message>div {
   text-align: center;
 }
 
@@ -178,14 +178,14 @@ label {
   outline: 0;
 }
 
-#send-message button, div.filebutton {
+#send-message button{
+  line-height: 22px;
   margin: 20px 0;
-  width: 110px;
   position: relative;
+  width: 110px;
 }
 
 button, div.filebutton {
-  margin: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -203,20 +203,24 @@ button, div.filebutton {
   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 {
-  padding: 2px 0 3px 0;
-  position: relative;
+  line-height: 24px;
+  margin: -7px 0;
   overflow: hidden;
+  padding: 2px 0;
+  position: relative;
   width: 150px !important;
 }