diff options
| -rw-r--r-- | css/style.css | 18 | ||||
| -rw-r--r-- | loggedin.js | 28 | ||||
| -rw-r--r-- | loggedin.php | 93 |
3 files changed, 49 insertions, 90 deletions
diff --git a/css/style.css b/css/style.css index 75d3f02..8073fe6 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> |