Fixes #13, shows max upload filesize, block uploads larger than set size

aschmelyun · Apr 16, 2023 · 923ef67 · 923ef67
1 parent 7f4c1ed
commit 923ef67
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/src/.env.example b/src/.env.example
@@ -3,7 +3,7 @@ APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
 APP_URL=http://localhost
-APP_VERSION=1.0.6
+APP_VERSION=1.0.7
 
 LOG_CHANNEL=stack
 LOG_DEPRECATIONS_CHANNEL=null

diff --git a/src/resources/js/components/FileDrop.vue b/src/resources/js/components/FileDrop.vue
@@ -74,7 +74,21 @@ const buttonStyles = reactive({
     'active': 'mt-4 bg-purple-500 border border-purple-500 text-white font-medium py-1.5 px-4 rounded mx-2'
 })
 
+const checkFilesize = (size) => {
+    let sizes = ['B', 'K', 'M', 'G']
+    let maxSize = parseInt(window.maxFilesize.substring(0, window.maxFilesize.length - 1))
+
+    maxSize = maxSize * Math.pow(1024, sizes.indexOf(window.maxFilesize.slice(-1)))
+
+    return size < maxSize
+}
+
 const onChange = () => {
+    if (!checkFilesize(file.value.files[0].size)) {
+        alert(`The file you selected is too large. Please select a file smaller than ${window.maxFilesize}.`)
+        return
+    }
+
     video.value = file.value.files[0]
 }
 
@@ -94,6 +108,12 @@ const drop = (e) => {
     e.preventDefault()
     e.stopPropagation()
     classes.value = 'w-full py-24 border-2 border-dashed mt-12'
+
+    if (!checkFilesize(e.dataTransfer.files[0].size)) {
+        alert(`The file you selected is too large. Please select a file smaller than ${window.maxFilesize}.`)
+        return
+    }
+
     video.value = e.dataTransfer.files[0]
 }
 

diff --git a/src/resources/views/app.blade.php b/src/resources/views/app.blade.php
@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <title>Sub&veebar;ert</title>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <script>
+        window.maxFilesize = "{{ ini_get('upload_max_filesize') }}";
+    </script>
 </head>
 <body>
     <div class="container mx-auto py-4 antialiased">
@@ -14,6 +17,9 @@
     </div>
     @yield('content')
     <footer class="text-center mt-12 mb-8">
-        <p class="text-sm text-gray-500">Thrown together in a weekend by <a href="https://twitter.com/aschmelyun" target="_blank" class="underline hover:text-gray-800 transition-colors duration-200" rel="noopener noreferrer">Andrew Schmelyun</a>@if(env('APP_VERSION')) <span class="text-gray-300">[v{{ env('APP_VERSION') }}]</span>@endif</p>
+        <p class="text-sm text-gray-500">Thrown together in a weekend by <a href="https://twitter.com/aschmelyun" target="_blank" class="underline hover:text-gray-800 transition-colors duration-200" rel="noopener noreferrer">Andrew Schmelyun</a></p>
+        @if(env('APP_VERSION'))
+            <p class="text-sm text-gray-300 mt-1">[Max Filesize: {{ ini_get('upload_max_filesize') }}] [v{{ env('APP_VERSION') }}]</p>
+        @endif
     </footer>
 </body>