icons for different mimetypes

4 files changed, 29 insertions, 9 deletions

diff --git a/css/style.css b/css/style.css
index 8073fe6..96b48c5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -277,8 +277,12 @@ input[type=submit]:hover {
     border-color: #ddd;
 }
 
+.file > img {
+    flex: 1 0 0;
+}
+
 .file:hover > img {
-    filter: brightness(150%);
+    filter: brightness(120%);
 }
 
 .path {
diff --git a/loggedin.js b/loggedin.js
index d774e16..b275c4a 100644
--- a/loggedin.js
+++ b/loggedin.js
@@ -8,12 +8,22 @@ const current_directory = document.getElementById("current_directory");
 
 the_file.onchange = on_file_added;
 
-var files = [];
 
 const pwd = "/";
 
 const pending_uploads = [];
 
+class FileView {
+    constructor(filename, visuals, mimetype, is_directory) {
+        this.filename     = filename;
+        this.visuals      = visuals;
+        this.mimetype     = mimetype;
+        this.is_directory = is_directory;
+    }
+}
+
+var files = [];
+
 function on_file_added(_e) {
     if (the_file.files.length >= 1) {
         filename_input.value = the_file.files[0].name;
@@ -54,24 +64,30 @@ function load_dir(pwd) {
     xhr.open('POST', '/php/readdir.php', true);
     xhr.onload = function () {
         for (const f of files)
-            f[1].remove();
+            f.visuals.remove();
         files = [];
 
         var json = JSON.parse(this.responseText);
         for (const f of json) {
-            add_file_visuals(f.name, f.mimetype);
+            add_file_visuals(f.name, f.is_directory, f.mimetype);
         }
     };
     xhr.send(data);
 }
 
-function add_file_visuals(name, mimetype) {
+function add_file_visuals(name, is_directory, mimetype) {
     var fileDiv = document.createElement('div');
 
     var img = document.createElement('img');
     var filename = document.createElement('div');
 
-    img.src="/mimeicons/application-pdf.png";
+    if (is_directory) {
+        img.src="/mimeicons/directory.png";
+    }
+    else {
+        img.src=`/mimeicons/${mimetype.replace("/", "-")}.png`;
+    }
+
     fileDiv.classList.add('file');
     filename.classList.add('filename');
     filename.innerText = name;
@@ -81,9 +97,9 @@ function add_file_visuals(name, mimetype) {
 
     current_directory.appendChild(fileDiv);
 
-    files.push([name, fileDiv]);
-
-    return fileDiv;
+    var file = new FileView(name, fileDiv, mimetype, is_directory);
+    files.push(file);
+    return file;
 }
 
 function begin_upload() {
diff --git a/mimeicons/directory.png b/mimeicons/directory.png
new file mode 100644
index 0000000..bcf2639
--- /dev/null
+++ b/mimeicons/directory.png
diff --git a/mimeicons/text-plain.png b/mimeicons/text-plain.png
new file mode 100644
index 0000000..924a5eb
--- /dev/null
+++ b/mimeicons/text-plain.png