Add dom per file

FossilOrigin-Name: 4748904de8bfc4e9324542fe71c1c0cfc42c4b73a4b2c29f170cedf5e8ae3a85

dist/js/main.js

@@ -1,4 +1,12 @@
 (function(){
+    // Global state variable
+    let state = {
+        file: {
+            files: [],
+            file_counter: 0,
+        }
+    };
+    
     Element.prototype.insertAfter = function(element) {
         element.parentNode.insertBefore(this, element.nextSibling);
     };
@@ -238,6 +246,40 @@
         rightbar_frame.height = rbar_frame_win.document.body.scrollHeight;
     }
 
+    function construct_file_upload(file)
+    {
+        let container = document.createElement("div");
+        container.className = "file-upload";
+        let content = document.createElement("div");
+        let info = document.createElement("span");
+        info.className = "upload-info";
+        content.className = "upload-content";
+        container.appendChild(content);
+        container.appendChild(info);
+        return container;
+    }
+
+    function evt_file_upload(e)
+    {
+        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]);
+
+        // Create file upload
+        for (let file of files)
+        {
+            file_upload_dom.appendChild(construct_file_upload(files));
+        }
+    }
+
     // Main (when loaded)
     document.addEventListener('DOMContentLoaded', () => {
         let reply_btn = document.getElementsByClassName("reply-btn");
@@ -262,5 +304,9 @@
 
         // File upload
         let file_input = document.querySelector("input[type=file]");
+        if (file_input)
+        {
+            file_input.addEventListener('change', evt_file_upload);
+        }
     });
 })();

dist/treebird.css

@@ -2068,6 +2068,22 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
     text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
+.file-uploads-container
+{
+    margin-top: 8px;
+}
+
+.file-uploads-container .file-upload
+{
+    display: inline-block;
+    height: 130px;
+    margin-left: 4px;
+    width: 200px;
+    background: linear-gradient(#fff, #f7f7f7);
+    border: 1px solid #cacaca;
+    border-radius: 8px;
+}
+
 /******************************
  *         Scrobbles          *
  ******************************/

static/post.tmpl

@@ -58,5 +58,6 @@
         <input type="submit" value="Post" class="btn post-btn">
       </div>
     </div>
+    <div class="file-uploads-container hidden"></div>
   </div>
 </form>