FILEUP

F diff --git a/loggedin.js b/loggedin.js
--- a/loggedin.js
+++ b/loggedin.js
      }
  }
  
+ // https://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de
+ function base64ArrayBuffer(arrayBuffer) {
+   var base64    = ''
+   var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+ 
+   var bytes         = new Uint8Array(arrayBuffer)
+   var byteLength    = bytes.byteLength
+   var byteRemainder = byteLength % 3
+   var mainLength    = byteLength - byteRemainder
+ 
+   var a, b, c, d
+   var chunk
+ 
+   // Main loop deals with bytes in chunks of 3
+   for (var i = 0; i < mainLength; i = i + 3) {
+     // Combine the three bytes into a single integer
+     chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]
+ 
+     // Use bitmasks to extract 6-bit segments from the triplet
+     a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
+     b = (chunk & 258048)   >> 12 // 258048   = (2^6 - 1) << 12
+     c = (chunk & 4032)     >>  6 // 4032     = (2^6 - 1) << 6
+     d = chunk & 63               // 63       = 2^6 - 1
+ 
+     // Convert the raw binary segments to the appropriate ASCII encoding
+     base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
+   }
+ 
+   // Deal with the remaining bytes and padding
+   if (byteRemainder == 1) {
+     chunk = bytes[mainLength]
+ 
+     a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2
+ 
+     // Set the 4 least significant bits to zero
+     b = (chunk & 3)   << 4 // 3   = 2^2 - 1
+ 
+     base64 += encodings[a] + encodings[b] + '=='
+   } else if (byteRemainder == 2) {
+     chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]
+ 
+     a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
+     b = (chunk & 1008)  >>  4 // 1008  = (2^6 - 1) << 4
+ 
+     // Set the 2 least significant bits to zero
+     c = (chunk & 15)    <<  2 // 15    = 2^4 - 1
+ 
+     base64 += encodings[a] + encodings[b] + encodings[c] + '='
+   }
+ 
+   return base64
+ }
+ 
  function update_path_visuals() {
      var the_path = focus.visuals.getElementsByClassName('path')[0];
  
  }
  
  function openfile_nondir() {
+     var mimetype = "text/plain";
+ 
+     for (const f of files) {
+         if (f.filename == focus.pwd[focus.pwd.length - 1])
+             mimetype = f.mimetype;
+     }
+ 
+     while (focus.filecontents.children.length > 0)
+         focus.filecontents.removeChild(focus.filecontents.lastChild);
+ 
      var data = new FormData();
      data.append('folder', get_path(focus.pwd.length - 1));
      data.append('filename', focus.pwd[focus.pwd.length - 1]);
      focus.filecontents.style.display = 'block';
      focus.foldercontents.style.display = 'none';
  
-     xhr.onload = function () {
-         focus.filecontents.innerText = xhr.responseText;
-     };
+     if (mimetype.split("/")[0] == "image") {
+         xhr.responseType = 'arraybuffer';
+         xhr.onload = function () {
+             var b = base64ArrayBuffer(xhr.response);
+             var image = new Image();
+             image.src = `data:image/png;base64,${b}`;
+             focus.filecontents.appendChild(image);
+         }
+     }
+     else {
+         xhr.onload = function () {
+             focus.filecontents.innerText = xhr.responseText;
+         };
+     }
+ 
      xhr.send(data);
  }
  
      wnd_html.appendChild(h2);
  
      //h2.onmousedown = (e) => {
-         //begin_drag(e, wnd_html);
-         // e.preventDefault();
+     //begin_drag(e, wnd_html);
+     // e.preventDefault();
      //};
  
      path = document.createElement('div');
F diff --git a/mimeicons/image-jpeg.png b/mimeicons/image-jpeg.png
new file mode 100644
B Binary files /dev/null and b/mimeicons/image-jpeg.png differ
F diff --git a/mimeicons/image-jpg.png b/mimeicons/image-jpg.png
new file mode 100644
B Binary files /dev/null and b/mimeicons/image-jpg.png differ
F diff --git a/mimeicons/image-png.png b/mimeicons/image-png.png
new file mode 100644
B Binary files /dev/null and b/mimeicons/image-png.png differ