From 9b66c172d8b2e4675d23d98e3273537f55281428 Mon Sep 17 00:00:00 2001
From: nekobit <nekobit@noemail.net>
Date: Tue, 12 Jul 2022 21:54:53 +0000
Subject: [PATCH] Upload and load files

FossilOrigin-Name: 01177fd25324478b1c826911906f86e4bc34a001c7df0f59b9d8428e03d82f4f
---
 dist/js/main.js   | 28 ++++++++++++++++++----------
 dist/treebird.css | 16 +++++++++++++---
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/dist/js/main.js b/dist/js/main.js
index cc2df6c..7f3ec20 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -246,13 +246,14 @@
         rightbar_frame.height = rbar_frame_win.document.body.scrollHeight;
     }
 
-    function construct_file_upload(file)
+    function construct_file_upload(file, file_content)
     {
         let container = document.createElement("div");
         container.className = "file-upload";
-        let content = document.createElement("div");
+        let content = document.createElement("img");
         let info = document.createElement("span");
         info.className = "upload-info";
+        content.src = file_content;
         content.className = "upload-content";
         container.appendChild(content);
         container.appendChild(info);
@@ -261,22 +262,29 @@
 
     function evt_file_upload(e)
     {
+        let target = e.target;
+
+        // TODO do something with this
+        if (target.classList.contains("used"))
+            target.id = `id-${state.file.file_counter++}`;
+            
         let file_upload_dom = this.closest("form").querySelector(".file-uploads-container");
         file_upload_dom.className = "file-uploads-container";
         const files = [...this.files];
 
-        // let reader = new FileReader();
-
-        // reader.onload = (() => {
-        //     return (e) => {
-        //         // do shit
-        //     }
-        // })(files[0]);
+        let reader;
 
         // Create file upload
         for (let file of files)
         {
-            file_upload_dom.appendChild(construct_file_upload(files));
+            reader = new FileReader();
+            reader.onload = (() => {
+                return (e) => {
+                    file_upload_dom.appendChild(construct_file_upload(files, e.target.result));
+                }
+            })(file);
+            reader.readAsDataURL(file);
+
         }
     }
 
diff --git a/dist/treebird.css b/dist/treebird.css
index 155e462..2ebaff5 100644
--- a/dist/treebird.css
+++ b/dist/treebird.css
@@ -2071,19 +2071,29 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
 .file-uploads-container
 {
     margin-top: 8px;
+    white-space: nowrap;
+    overflow: auto;
 }
 
 .file-uploads-container .file-upload
 {
+    overflow: hidden;
     display: inline-block;
-    height: 130px;
-    margin-left: 4px;
-    width: 200px;
+    margin: 2px 4px;
     background: linear-gradient(#fff, #f7f7f7);
     border: 1px solid #cacaca;
     border-radius: 8px;
 }
 
+.file-upload .upload-content
+{
+    width: 200px;
+    height: 130px;
+    object-fit: cover;
+    opacity: 0.4;
+}
+
+
 /******************************
  *         Scrobbles          *
  ******************************/