Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Send images in chat via FileReader+base64 Encoding. #4

Open
wants to merge 2 commits into from

1 participant

@mmarcon

Just in case you are interested in having it there for future workshops. Works in Chrome, Firefox and Safari.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 5, 2012
  1. @mmarcon

    Send images in chat.

    mmarcon authored
  2. @mmarcon

    Image post: style fixes.

    mmarcon authored
This page is out of date. Refresh to see the latest.
View
43 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;
+}
+
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]) {
Something went wrong with that request. Please try again.