From 76d480420f611c09625e947f0f0ed496c79f2ce9 Mon Sep 17 00:00:00 2001
From: Alex Vitkov <alexvitkov98@gmail.com>
Date: Fri, 12 Feb 2021 12:38:48 +0200
Subject: upload form front end

---
 css/style.css | 18 ++++++++----
 loggedin.js   | 28 ++++++++++++++++++
 loggedin.php  | 93 +++++------------------------------------------------------
 3 files changed, 49 insertions(+), 90 deletions(-)
 create mode 100644 loggedin.js

diff --git a/css/style.css b/css/style.css
index aa29cf6..f37eed0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -166,19 +166,27 @@ form p {
 	to   { opacity: 1; }
 }
 
-input:not([type=file]) {
+.content > input {
 	min-width: 300px;
+}
+
+input:not([type=file]) {
 	border: 1px solid #bbb;
-	padding: 0.5rem;
+	padding: 0.8rem 2rem 0.5rem 2rem;
 	font-size: inherit;
 	font-family: inherit;
 	border-radius: 0.3rem;
-	background: #fdfdfd;
-	transition: background 0.15s, border-color 0.35s;
+	background: #f6f6f6;
 }
 
-input[type=submit] {
+input[type=button], button, input[type=submit] {
 	cursor: pointer;
+}
+input[type=button]:hover, button:hover, input[type=submit]:hover {
+    background: white;
+}
+
+input[type=submit] {
 	margin-top: 2rem;
 	width: 100%;
 	display: block;
diff --git a/loggedin.js b/loggedin.js
new file mode 100644
index 0000000..8980586
--- /dev/null
+++ b/loggedin.js
@@ -0,0 +1,28 @@
+const upload_form    = document.getElementById("upload_form");
+const the_file       = document.getElementById("the_file");
+const filename_input = document.getElementById("filename");
+const upload_btn     = document.getElementById("upload_btn");
+
+the_file.onchange = on_file_added;
+
+function on_file_added(e) {
+    if (the_file.files.length >= 1) {
+        filename_input.value = the_file.files[0].name;
+
+        // Send the form asynchronously through the fetch api
+        fetch(upload_form.action, {
+            method: upload_form.method,
+            body: new FormData(upload_form)
+        })
+
+        alert("Sent the upload request");
+    }
+    else {
+        alert("No files selected");
+    }
+
+}
+
+function begin_upload() {
+    the_file.click();
+}
diff --git a/loggedin.php b/loggedin.php
index dd3a94f..85e59cc 100644
--- a/loggedin.php
+++ b/loggedin.php
@@ -1,10 +1,10 @@
+
 <div>
     <div class="filesystem">
-
-        <h2>
+        <h2 style="display: flex; gap: 1rem;">
             <div class="path">
                 <a class="pathentry" href="#"> <?php echo $_SESSION['username'] ?>'s files/</a><a class="pathentry" href="#">foo/</a><a class="pathentry" href="#">bar</a></div>
-            <input type="button" value="New Folder">
+            <input id="upload_btn" type="button" value="Upload" onclick="begin_upload()">
         </h2>
 
         <div class="files">
@@ -12,91 +12,14 @@
                 <img src="/mimeicons/application-pdf.png">
                 <div class="filename">asdf</div>
             </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
-            <div class="file"> 
-                <img src="/mimeicons/application-pdf.png">
-                <div class="filename">asdf</div>
-            </div>
         </div>
     </div>
 
-
 </div>
 
+<form id="upload_form" style="display:none;" action="php/upload.php" method="post">
+    <input id="filename" name="filename">
+    <input type="file" name="the_file" id="the_file">
+</form>
 
-
+<script src="loggedin.js"></script>
-- 
cgit v1.2.3