[+] mobile upload button

package.json

@@ -10,6 +10,7 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
+    "@iconify/svelte": "^3.1.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
     "sass": "^1.70.0",

src/lib/Home.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { HOST } from './config'
+    import Icon from '@iconify/svelte'
 
     let isDragging = false
     let isUploading = false
@@ -57,6 +58,13 @@
             window.location.href = `/${res.audio_id}`;
         }
     }
+
+    function onFileChange(e: Event) {
+        let input = e.target as HTMLInputElement
+        let file = input.files?.[0]
+        if (!file) return
+        upload(file)
+    }
 </script>
 
 <div>
@@ -69,6 +77,11 @@
             Drop file to upload
         {/if}
     </div>
+
+    <div class="upload-btn">
+        <input type="file" id="file" on:change={onFileChange} />
+        <label for="file"><Icon icon="tabler:upload"/></label>
+    </div>
 </div>
 
 <style lang="sass">
@@ -112,6 +125,20 @@
 
     z-index: 110
 
+    background: $c-emp
+    width: 50px
+    height: 50px
+    border-radius: 50%
+
+    color: white
+    display: flex
+    align-items: center
+    justify-content: center
+
+    box-shadow: 0 3px 5px rgba(black, 0.4)
+
+    cursor: pointer
+
     input
       display: none
 </style>

yarn.lock

@@ -125,6 +125,18 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
   integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
 
+"@iconify/svelte@^3.1.6":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@iconify/svelte/-/svelte-3.1.6.tgz#060821ecae5dd92e9c1f0420a674eda5bc060086"
+  integrity sha512-yLSrlkOx5J6xXU5GDLPBV/MdVBVEZhd36onfqSbxQobp1XBoWQbMPLNZyCAmTKCPnmzXSowGy79agl8FQ3kj6A==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"