style an upload button for phones/tablets

static/css/index.css

@@ -42,6 +42,24 @@ form.highlight {
     grid-row: 1/2;
 }
 
+.fileUpload {
+    margin-bottom: 1.5em;
+}
+.fileUpload label {
+    color: #83837b;
+    border: 1px solid #83837b;
+    border-radius: .3em;
+    padding: 1em;
+    display: block;
+    text-align: center;
+}
+
+@media (min-width: 992px) {
+    .fileUpload {
+        display: none;
+    }
+}
+
 textarea {
     height: 90%;
     width: 100%;
@@ -125,4 +143,4 @@ button[type="submit"]:hover {
 
 *.hidden {
     display: none;
-}
+}

static/js/index.js

@@ -1,6 +1,7 @@
 const body = document.querySelector('body');
 const form = document.querySelector('form');
 const grid_form = document.querySelector('.grid_form');
+const fileInput = document.querySelector('.fileUpload');
 const upload_card = document.querySelector('#upload_card');
 const textarea = document.querySelector('textarea');
 const select = document.querySelector('select');
@@ -18,6 +19,7 @@ window.onload = () => {
 const onInput = () => {
     submitButton.classList.toggle('hidden', !textarea.value);
     select.classList.toggle('hidden', !textarea.value);
+    fileInput.classList.toggle('hidden', textarea.value);
 }
 textarea.addEventListener('input', onInput);
 onInput();

templates/index.html.tera

@@ -4,6 +4,10 @@
 <form action="/submit" method="post" ondrop="dropHandler(event)">
     <div class="grid_form">
         <div class="textareaBox">
+            <div class="fileUpload">
+                <input type="file" name="file-upload" id="file-upload" hidden />
+                <label for="file-upload">Upload a file</label>
+            </div>
             <textarea name="content" id="textarea_content" style="resize: none" placeholder="
 
 bin(3)                                BIN                               bin(3)