Added upload Image/Video/File

web/client.js

@@ -58,13 +58,13 @@ window.setInterval(function() {
 
 function join(channel) {
 
-    if (document.domain == 'uchats.herokuapp.com') {
+    //if (document.domain == 'uchats.herokuapp.com') {
         ws = new WebSocket('wss://uchats.herokuapp.com/uchatsserver')
-    }
+    /*}
     else {
         // for local installs
         ws = new WebSocket('ws://' + location.hostname+":"+location.port + '/uchatsserver')
-    }
+    }*/
 
     var wasConnected = false
 
@@ -191,7 +191,7 @@ function pushMessage(args) {
     var textEl = document.createElement('pre')
     textEl.classList.add('text')
     
-    textEl.textContent = args.text || ''
+    textEl.innerHTML = args.text || ''
     textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks)
     
     if ($('#parse-latex').checked) {
@@ -221,7 +221,6 @@ function pushMessage(args) {
     updateTitle()
 }
 
-
 function insertAtCursor(text) {
     var input = $('#chatinput')
     var start = input.selectionStart || 0
@@ -297,6 +296,56 @@ $('#footer').onclick = function() {
     $('#chatinput').focus()
 }
 
+$('#uploadimage').onchange = function() {
+    file = this.files[0];
+    reader  = new FileReader();
+    
+    reader.addEventListener("load", function () {
+        args = {};
+        args.cmd = "chat";
+        args.text = '<img src="'+reader.result+'">';
+        send(args);
+    }, false);
+     
+    if (file) {
+        reader.readAsDataURL(file);
+    } 
+}
+
+$('#uploadvideo').onchange = function() {
+    file = this.files[0];
+    reader  = new FileReader();
+    
+    reader.addEventListener("load", function () {
+        args = {};
+        args.cmd = "chat";
+        args.text =   '<video width="320" height="240" controls>'+
+                      '<source src="'+reader.result+'">'+
+                      '</video>';
+        send(args);
+    }, false);
+     
+    if (file) {
+        reader.readAsDataURL(file);
+    } 
+}
+
+$('#uploadfile').onchange = function() {
+    file = this.files[0];
+    reader  = new FileReader();
+    
+    reader.addEventListener("load", function () {
+        args = {};
+        args.cmd = "chat";
+        args.text = '<a target="_blank" href="'+reader.result+'">File: '+file.name+'</a>';
+        send(args);
+    }, false);
+     
+    if (file) {
+        reader.readAsDataURL(file);
+    } 
+}
+
 $('#chatinput').onkeydown = function(e) {
 	if (e.keyCode == 13 /* ENTER */ && !e.shiftKey) {
             e.preventDefault()

web/index.jsp

@@ -15,6 +15,9 @@
       </article>
       <footer id="footer">
          <div class="container">
+            <span class="select-wrapper" style="background-image: url(images/image.png);"><input class="fotterbutton" type="file" id="uploadimage" value="Upload Image" accept="image/*"></span>
+            <span class="select-wrapper" style="background-image: url(images/video.png);"><input class="fotterbutton" type="file" id="uploadvideo" value="Upload Video" accept="video/*"></span>
+            <span class="select-wrapper" style="background-image: url(images/file.png);"><input class="fotterbutton" type="file" id="uploadfile" value="Upload File"></span>
             <form id="chatform" class="messages"><textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea></form>
          </div>
       </footer>

web/style.css

@@ -3,19 +3,23 @@ body {
   margin: 0;
   overflow-y: scroll;
 }
+
 body,
 input,
 textarea {
   font-family: 'DejaVu Sans Mono', monospace;
   font-size: 12px;
 }
+
 input[type="checkbox"] {
   margin: 0;
   margin-right: 1em;
 }
+
 label {
   vertical-align: 3px;
 }
+
 input,
 textarea {
   background: none;
@@ -23,11 +27,13 @@ textarea {
   outline: none;
   resize: none;
 }
+
 h4 {
   font-size: 12px;
   margin: 1em 0;
   font-weight: bold;
 }
+
 pre {
   tab-size: 2;
   white-space: pre-wrap;
@@ -35,37 +41,48 @@ pre {
   tab-size: 4;
   -moz-tab-size: 4;
 }
+
 a {
   color: inherit;
   text-decoration: none;
   cursor: pointer;
 }
+
 a:hover {
   text-decoration: underline;
 }
+
 ul {
   padding-left: 0;
 }
+
 ul li {
   list-style: inside;
 }
+
 .hidden {
   display: none;
 }
+
 .container {
   max-width: 600px;
   margin: 0 auto;
 }
+
 .messages {
   border-left: 1px solid;
 }
+
 #messages {
   padding-top: 2em;
 }
+
 .message {
   padding-bottom: 1em;
 }
+
 .nick {
+
   float: left;
   width: 16em;
   margin-left: -17em;
@@ -74,29 +91,54 @@ ul li {
   white-space: nowrap;
   overflow: hidden;
 }
+
 .trip {
   font-size: 10px;
 }
+
 .text {
   margin: 0;
   margin-left: 1em;
 }
+
 .text p {
   margin: 0;
 }
+
+.select-wrapper {
+  background-repeat: no-repeat;
+  background-size: cover;
+  float:left;
+  display: block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin: 5px;
+}
+.fotterbutton {
+  width: 20px;
+  height: 20px;
+  margin-right: 100px;
+  opacity: 0;
+  filter: alpha(opacity=0); /* IE 5-7 */
+}
+
 #footer {
   position: fixed;
   bottom: 0;
   width: 100%;
 }
+
 #chatform {
   border-top: 1px solid;
 }
+
 #chatinput {
   width: 100%;
   padding: 1em;
   box-sizing: border-box;
 }
+
 #sidebar {
   position: fixed;
   top: 0;
@@ -106,9 +148,11 @@ ul li {
   border-left: solid 1px;
   overflow-y: auto;
 }
+
 #sidebar-content {
   width: 180px;
 }
+
 @media only screen and (max-width: 600px) {
   .messages {
     border: none;