minimal-examples/http-server/minimal-http-server-deaddrop/mount-origin/deaddrop.js

   1 (function() {
   2
   3         var server_max_size = 0, ws;
   4
   5         function san(s)
   6         {
   7                 if (!s)
   8                         return "";
   9
  10                 return s.replace(/&/g, "&amp;").
  11                 replace(/\</g, "&lt;").
  12                 replace(/\>/g, "&gt;").
  13                 replace(/\"/g, "&quot;").
  14                 replace(/%/g, "&#37;");
  15         }
  16
  17         function lws_urlencode(s)
  18         {
  19                 return encodeURI(s).replace(/@/g, "%40");
  20         }
  21
  22         function trim(num)
  23         {
  24                 var s = num.toString();
  25
  26                 if (!s.indexOf("."))
  27                         return s;
  28
  29                 while (s.length && s[s.length - 1] === "0")
  30                         s = s.substring(0, s.length - 1);
  31
  32                 if (s[s.length - 1] === ".")
  33                         s = s.substring(0, s.length - 1);
  34
  35                 return s;
  36         }
  37
  38         function humanize(n)
  39         {
  40                 if (n < 1024)
  41                         return n + "B";
  42
  43                 if (n < 1024 * 1024)
  44                         return trim((n / 1024).toFixed(2)) + "KiB";
  45
  46                 if (n < 1024 * 1024 * 1024)
  47                         return trim((n / (1024 * 1024)).toFixed(2)) + "MiB";
  48
  49                 return trim((n / (1024 * 1024 * 1024)).toFixed(2)) + "GiB";
  50         }
  51
  52         function da_enter(e)
  53         {
  54                 var da = document.getElementById("da");
  55
  56                 e.preventDefault();
  57                 da.classList.add("trot");
  58         }
  59
  60         function da_leave(e)
  61         {
  62                 var da = document.getElementById("da");
  63
  64                 e.preventDefault();
  65                 da.classList.remove("trot");
  66         }
  67
  68         function da_over(e)
  69         {
  70                 var da = document.getElementById("da");
  71
  72                 e.preventDefault();
  73                 da.classList.add("trot");
  74         }
  75
  76         function clear_errors() {
  77                 var t = document.getElementById("ongoing");
  78
  79                 for (n = 0; n < t.rows.length; n++)
  80                         if (t.rows[n].cells[0].classList.contains("err"))
  81                                 t.deleteRow(n);
  82         }
  83
  84         function do_upload(file) {
  85                 var formData = new FormData();
  86                 var t = document.getElementById("ongoing");
  87
  88                 formData.append("file", file);
  89
  90                 var row = t.insertRow(0), c1 = row.insertCell(0),
  91                 c2 = row.insertCell(1), c3 = row.insertCell(2);
  92
  93                 c1.classList.add("ogn");
  94                 c1.classList.add("r");
  95
  96                 if (file.size > server_max_size) {
  97                         c1.innerHTML = "Too Large";
  98                         c1.classList.add("err");
  99                 } else
 100                         c1.innerHTML = "<img class=\"working\">";
 101
 102                 c2.classList.add("ogn");
 103                 c2.classList.add("r");
 104                 c2.innerHTML = humanize(file.size);
 105
 106                 c3.classList.add("ogn");
 107                 c3.innerHTML = file.name;
 108
 109                 if (file.size > server_max_size)
 110                         return;
 111
 112                 fetch("upload/" + lws_urlencode(file.name), {
 113                         method: "POST",
 114                         body: formData
 115                 })
 116                 .then((e) => { /* this just means we got a response code */
 117                         var us = e.url.split("/"), ul = us[us.length - 1], n;
 118
 119                         for (n = 0; n < t.rows.length; n++)
 120                                 if (ul === lws_urlencode(
 121                                               t.rows[n].cells[2].textContent)) {
 122                                         if (e.ok === true) {
 123                                                 t.deleteRow(n);
 124                                         } else {
 125                                                 t.rows[n].cells[0].textContent =
 126                                         "Failed " + san(e.status.toString());
 127                                                 t.rows[n].cells[0].
 128                                                         classList.add("err");
 129                                         }
 130                                         break;
 131                                 }
 132                 })
 133                 .catch((e) => {
 134                         var us = e.url.split("/"), ul = us[us.length - 1], n;
 135
 136                         for (n = 0; n < t.rows.length; n++)
 137                                 if (ul === lws_urlencode(
 138                                           t.rows[n].cells[2].textContent)) {
 139                                         t.rows[n].cells[0] = "FAIL";
 140                                         break;
 141                                 }
 142                 });
 143         }
 144
 145         function da_drop(e) {
 146                 var da = document.getElementById("da");
 147
 148                 e.preventDefault();
 149                 da.classList.remove("trot");
 150
 151                 clear_errors();
 152
 153                 ([...e.dataTransfer.files]).forEach(do_upload);
 154         }
 155
 156         function upl_button(e) {
 157                 var fi = document.getElementById("file"),
 158                 da = document.getElementById("da");
 159
 160                 clear_errors();
 161                 e.preventDefault();
 162
 163                 ([...fi.files]).forEach(do_upload);
 164         }
 165
 166         function body_drop(e) {
 167                 e.preventDefault();
 168         }
 169
 170         function inp() {
 171                 var fi = document.getElementById("file"),
 172                 upl = document.getElementById("upl");
 173                 console.log("inp");
 174                 upl.disabled = !fi.files.length;
 175         }
 176
 177         function delfile(e)
 178         {
 179                 e.stopPropagation();
 180                 e.preventDefault();
 181
 182                 ws.send("{\"del\":\"" + decodeURI(e.target.getAttribute("file")) +
 183                 "\"}");
 184         }
 185
 186         function get_appropriate_ws_url(extra_url)
 187         {
 188                 var pcol;
 189                 var u = document.URL;
 190
 191                 /*
 192                  * We open the websocket encrypted if this page came on an
 193                  * https:// url itself, otherwise unencrypted
 194                  */
 195
 196                 if (u.substring(0, 5) === "https") {
 197                         pcol = "wss://";
 198                         u = u.substr(8);
 199                 } else {
 200                         pcol = "ws://";
 201                         if (u.substring(0, 4) === "http")
 202                                 u = u.substr(7);
 203                 }
 204
 205                 u = u.split("/");
 206
 207                 /* + "/xxx" bit is for IE10 workaround */
 208
 209                 return pcol + u[0] + "/" + extra_url;
 210         }
 211
 212         function new_ws(urlpath, protocol)
 213         {
 214                 if (typeof MozWebSocket != "undefined")
 215                         return new MozWebSocket(urlpath, protocol);
 216
 217                 return new WebSocket(urlpath, protocol);
 218         }
 219
 220         document.addEventListener("DOMContentLoaded", function() {
 221                 var da = document.getElementById("da"),
 222                 fi = document.getElementById("file"),
 223                 upl = document.getElementById("upl");
 224
 225                 da.addEventListener("dragenter", da_enter, false);
 226                 da.addEventListener("dragleave", da_leave, false);
 227                 da.addEventListener("dragover", da_over, false);
 228                 da.addEventListener("drop", da_drop, false);
 229
 230                 upl.addEventListener("click", upl_button, false);
 231                 fi.addEventListener("change", inp, false);
 232
 233                 window.addEventListener("dragover", body_drop, false);
 234                 window.addEventListener("drop", body_drop, false);
 235
 236                 ws = new_ws(get_appropriate_ws_url(""), "lws-deaddrop");
 237                 try {
 238                         ws.onopen = function() {
 239                                 var dd = document.getElementById("ddrop"),
 240                                 da = document.getElementById("da");
 241
 242                                 dd.classList.remove("noconn");
 243                                 da.classList.remove("disa");
 244                         };
 245
 246                         ws.onmessage = function got_packet(msg) {
 247                                 var j = JSON.parse(msg.data), s = "", n,
 248                                 t = document.getElementById("dd-list");
 249
 250                                 server_max_size = j.max_size;
 251                                 document.getElementById("size").innerHTML =
 252                                         "Server maximum file size " +
 253                                         humanize(j.max_size);
 254
 255                                 s += "<table class=\"nb\">";
 256                                 for (n = 0; n < j.files.length; n++) {
 257                                         var date = new Date(j.files[n].mtime * 1000);
 258                                         s += "<tr><td class=\"dow r\">" +
 259                                         humanize(j.files[n].size) +
 260                                         "</td><td class=\"dow\">" +
 261                                         date.toDateString() + " " +
 262                                         date.toLocaleTimeString() +
 263                                         "</td><td>";
 264                                         if (j.files[n].yours === 1)
 265                                                 s += "<img id=\"d" + n +
 266                                           "\" class=\"delbtn\" file=\"" +
 267                                                 lws_urlencode(san(j.files[n].name)) + "\">";
 268                                         else
 269                                                 s += " ";
 270
 271                                         s += "</td><td class=\"ogn\"><a href=\"get/" +
 272                                         lws_urlencode(san(j.files[n].name)) +
 273                                           "\" download>" +
 274                                         san(j.files[n].name) + "</a></td></tr>";
 275                                 }
 276                                 s += "</table>";
 277
 278                                 t.innerHTML = s;
 279
 280                                 for (n = 0; n < j.files.length; n++) {
 281                                         var d = document.getElementById("d" + n);
 282                                         if (d)
 283                                                 d.addEventListener("click",
 284                                                                 delfile, false);
 285                                 }
 286                         };
 287
 288                         ws.onclose = function() {
 289                                 var dd = document.getElementById("ddrop"),
 290                                 da = document.getElementById("da");
 291
 292                                 dd.classList.add("noconn");
 293                                 da.classList.add("disa");
 294                         };
 295                 } catch(exception) {
 296                         alert("<p>Error " + exception);
 297                 }
 298
 299         });
 300 }());