Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Send images in chat.

  • Loading branch information...
commit 7dfadfa3d41df3238e4c8d78894adccdb388e4bd 1 parent 9963149
@mmarcon authored
View
29 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;
+}
+
View
5 public/index.html
@@ -25,7 +25,10 @@
</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>
View
16 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);
+
+ });
});
View
6 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]) {
Please sign in to comment.
Something went wrong with that request. Please try again.