srdgd

README.md

@@ -21,8 +21,7 @@ TOKEN=KILL-YOURSELF.NOW
 - [X] 1.2.1 add file counter to main page
 - [X] 1.2.2 clean up this shitty code
 - [X] 1.2.3 bugfixes
-- [ ] 1.3.0 new ui; accounts; utility endpoints
+- [ ] 1.3.0 new ui; accounts; utility endpoints; multi file uploads
-- [ ] 1.3.0 add utility endpoints: `/embed/:fileId` for discord, `/:fileId` for quick access
 - [ ] 1.3.1 disable cloning of local ips
 - [ ] 1.4.0 admin panel
 - [ ] 2.0.0 rewrite using theUnfunny's code as a base/rewrite using monofile-core

src/style/app/uploader/add_new_files.scss

@@ -0,0 +1,104 @@
+#uploadWindow {
+    #add_new_files {
+        background-color:#191919;
+        border: 1px solid gray;
+        padding: 0px 0px 10px 0px;
+
+        @media screen and (max-width: 500px) {
+            width:100%;
+        }
+
+        p {
+            font-family: "Fira Code", monospace;
+            text-align: left;
+            margin: 0px 0px 0px 10px;
+            font-size: 30px;
+
+            span {
+                font-size:16px;
+                position:relative;
+                top:-4px;
+                left:10px;
+            }
+
+            @media screen and (max-width:500px) {
+                font-size: 40px;
+
+                span {
+                    font-size:20px;
+                    position:relative;
+                    top:-6px;
+                    left:10px;
+                }
+            }
+        }
+
+        #file_add_btns {
+            width:calc( 100% - 20px );
+            margin:auto;
+            position:relative;
+            display:flex;
+            flex-direction:row;
+            column-gap:10px;
+
+            button, input[type=text] {
+                background-color:#333333;
+                color:#DDDDDD;
+                border:none;
+                outline:none;
+                padding:5px;
+                
+                flex-basis:50%;
+                flex-grow:1;
+                transition-duration:250ms;
+
+                @media screen and (max-width: 500px) {
+                    font-size:16px;
+                    padding:10px;
+                }
+            }
+
+            button {
+                cursor:pointer;
+
+                &:hover {
+                    @media screen and (min-width: 500px) {
+                        transition-duration:250ms;
+                        flex-basis: 60%;
+                    }
+                    background-color:#393939;
+                    color: #ffffff;
+                }
+            }
+
+            .fileUpload {
+                width:100%;
+                height:100px;
+                position:relative;
+
+                background-color:#262626;
+
+                input[type=file] {
+                    opacity: 0;
+                    position:absolute;
+                    left:0px;
+                    top:0px;
+                    width:100%;
+                    height:100%;
+                    cursor:pointer;
+                }
+
+                p {
+                    position:absolute;
+                    top:50%;
+                    transform:translateY(-50%);
+                    font-size:12px;
+                    width:100%;
+                    text-align:center;
+                    padding:0px;
+                    margin: 0px;
+                }
+            }
+        }
+    }
+}

src/style/app/uploads.scss

@@ -1,10 +1,14 @@
+@use "uploader/add_new_files";
+
 #uploadWindow {
     position:absolute;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%);
-    padding:5px 10px 10px 10px;
+    padding:10px 15px 10px 15px;
     
+    width:350px;
+
     background-color:#222222;
     color:#ddd;
 
@@ -25,77 +29,6 @@
     .number {
         font-family: "Inconsolata", monospace;
     }
-    
-    #add_new_files {
-        background-color:#191919;
-        border: 1px solid gray;
-        width:350px;
-        padding: 0px 0px 10px 0px;
-
-        @media screen and (max-width: 500px) {
-            width:100%;
-        }
-
-        p {
-            font-family: "Fira Code", monospace;
-            text-align: left;
-            margin: 0px 0px 0px 10px;
-            font-size: 30px;
-
-            span {
-                font-size:16px;
-                position:relative;
-                top:-4px;
-                left:10px;
-            }
-
-            @media screen and (max-width:500px) {
-                font-size: 40px;
-
-                span {
-                    font-size:20px;
-                    position:relative;
-                    top:-6px;
-                    left:10px;
-                }
-            }
-        }
-
-        #file_add_btns {
-            width:calc( 100% - 20px );
-            margin:auto;
-            position:relative;
-            display:flex;
-            flex-direction:row;
-            column-gap:10px;
-
-            button {
-                background-color:#333333;
-                color:#DDDDDD;
-                border:none;
-                padding:5px;
-                
-                flex-basis:50%;
-                flex-grow:1;
-                transition-duration:250ms;
-                cursor:pointer;
-
-                @media screen and (max-width: 500px) {
-                    font-size:16px;
-                    padding:10px;
-                }
-
-                &:hover {
-                    @media screen and (min-width: 500px) {
-                        transition-duration:250ms;
-                        flex-basis: 60%;
-                    }
-                    background-color:#393939;
-                    color: #ffffff;
-                }
-            }
-        }
-    }
 
     @media screen and (max-width: 500px) {
         width: calc( 100% - 20px );

src/svelte/elem/UploadWindow.svelte

@@ -2,6 +2,8 @@
 
     // stats
 
+    import AttachmentZone from "./uploader/AttachmentZone.svelte";
+
     let ServerStats = {}
 
     fetch("/server").then(async (data) => {
@@ -10,6 +12,7 @@
     
     // uploads
 
+    let attachmentZone;
     let uploads = new Map()
 
 </script>
@@ -22,7 +25,7 @@
 
     <div>
         {#each Array.from(uploads.entries()) as upload (upload[0])}
-            <div class="Upload">
+            <div class="file">
                 
             </div>
         {/each}
@@ -30,21 +33,21 @@
 
     <div style:height="10px" />
     
-    <div id="add_new_files">
+    {#if uploads.size < 1}
-        <p>+<span>add files</span></p>
+        <AttachmentZone bind:this={attachmentZone}/>
-        <div id="file_add_btns">
+    {/if}
-            <button>upload file...</button><button>clone url...</button>
-        </div>
-    </div>
 
     <div style:height="10px" />
    
     <p style:color="#999999" style:text-align="center">
         Hosting <span class="number" style:font-weight="600">{ServerStats.files || "•••"}</span> files
+        —
+        Maximum filesize is <span class="number" style:font-weight="600">{((ServerStats.maxDiscordFileSize || 0)*(ServerStats.maxDiscordFiles || 0))/1048576 || "•••"}MB</span>
         <br />
     </p>
 
     <p style:color="#999999" style:text-align="center" style:font-size="12px">
         Made with ❤ by <a href="https://github.com/nbitzz" style:font-size="12px">@nbitzz</a> — <a href="https://github.com/nbitzz/monofile" style:font-size="12px">source</a>
     </p>
+    <div style:height="10px" />
 </div>

src/svelte/elem/uploader/AttachmentZone.svelte

@@ -0,0 +1,56 @@
+<script>
+    import { fade, scale } from "svelte/transition";
+    import { circIn, circOut } from "svelte/easing"
+
+    let uploadTypes = {
+        files: 1,
+        clone: 2
+    }
+
+    let uploadType = undefined
+
+    function _void(node, { duration, easingFunc, op }) {
+        let rect = node.getBoundingClientRect()
+
+        return {
+            duration: duration||300,
+            css: t => {
+                let eased = (easingFunc || circIn)(t)
+
+                return `
+                    white-space: nowrap;
+                    height: ${(eased)*(rect.height)}px;
+                    padding: 0px;
+                    opacity:${eased};
+                    overflow: clip;
+                `
+            }
+        }
+    }
+</script>
+
+<!-- there are 100% better ways to do this but idgaf, it's still easier to manage than <1.3 lmao -->
+
+<div id="add_new_files" transition:_void={{duration:200}}>
+    <p>+<span>add files</span></p>
+    {#if !uploadType}
+        <div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
+            <button on:click={() => uploadType = uploadTypes.files} >upload files...</button>
+            <button on:click={() => uploadType = uploadTypes.clone} >clone url...</button>
+        </div>
+    {:else}
+        {#if uploadType == uploadTypes.files}
+            <div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
+                <div class="fileUpload">
+                    <p>click/tap to browse<br/>or drag files into this box</p>
+                    <input type="file" multiple>
+                </div>
+            </div>
+        {:else if uploadType == uploadTypes.clone}
+            <div id="file_add_btns" out:_void in:_void={{easingFunc:circOut}}>
+                <input placeholder="url" type="text">
+                <button style:flex-basis="30%">add file</button>
+            </div>
+        {/if}
+    {/if}
+</div>