drop file functionality

filed/static/delay.js

@@ -0,0 +1 @@
+const delay=async m=>{return new Promise(r=>setTimeout(r,m))}

filed/static/dragndrop-form.js

@@ -1,11 +1,55 @@
 (
     () => {
         // display the js only text
-        document.getElementById('drag-n-drop-jsonly').style.display = 'initial';
+        const text = document.getElementById('drag-n-drop-jsonly');
+        text.style.display = 'initial';
 
+        /** @type {HTMLElement} */
+        const root_drag_rop = document.getElementsByClassName('file-drag-n-drop')[0];
+        /** @type {HTMLElement} */
         const drag_rop = document.getElementsByClassName('file-drag-n-drop-inside')[0];
         const dr_rop_t = document.getElementsByClassName('file-drag-n-drop-inside-text')[0];
 
+        function drag_end() {
+            root_drag_rop.style.background = 'var(--header-sec-color)'
+            drag_rop.style.borderColor = '#656565';
+        }
 
+        async function fill_bg() {
+            for (let i = 100; i != 0; i--) {
+                await delay(Math.random());
+                root_drag_rop.style.background = `linear-gradient(#353535 ${i}%, var(--header-sec-color) ${i + 0.01}%)`;
+            }
+            root_drag_rop.style.background = `var(--header-sec-color)`;
+        }
+
+        let drdrop_enabled = true;
+
+        drag_rop.addEventListener('drop', async e => {
+            e.preventDefault();
+
+            if (!drdrop_enabled) return;
+
+            if (e.dataTransfer.items) {
+                for (let i = 0; i != e.dataTransfer.items.length; i++) {
+                    let file = e.dataTransfer.items[i].getAsFile();
+                    text.innerText = 'Processing...';
+                    drdrop_enabled = false;
+                    await fill_bg();
+                    drdrop_enabled = true;
+                    text.innerText = `Selected file: ${file.name.substring(0,16)}${file.name.length > 16 ? '...' : ''}\nYou can drop another file to replace this one`;
+                }
+            }
+        });
+        drag_rop.addEventListener('dragover', e => {
+            e.preventDefault();
+            if (!drdrop_enabled) return;
+
+            root_drag_rop.style.background = '#393939'
+            drag_rop.style.borderColor = '#959595';
+        });
+        
+        drag_rop.addEventListener('mouseleave', drag_end);
+        drag_rop.addEventListener('dragend',    drag_end)
     }
 )()

filed/static/paint.css

@@ -136,6 +136,7 @@ p {
     background: var(--header-sec-color);
     border-radius: 16px;
     padding: var(--header-padding-x);
+    transition: 250ms ease;
 }
 .file-drag-n-drop * { display: block }
 .file-drag-n-drop object { display: initial }
@@ -144,6 +145,7 @@ p {
     border: 4px dotted #656565;
     height: calc(100% - 32px - 8px);
     border-radius: 16px;
+    transition: 250ms ease;
 }
 .file-drag-n-drop .file-drag-n-drop-inside .file-drag-n-drop-inside-text {
     margin: 0;
@@ -153,3 +155,9 @@ p {
     text-align: center;
     line-height: 32px;
 }
+
+@media (max-width:513px) {
+    .file-drag-n-drop {
+        width: calc(100% - 32px);
+    }
+}

filed/templates/base.html

@@ -7,6 +7,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;900&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="/paint.css" />
+        <script src="/delay.js"></script>
         <title>blek! File</title>
         {% block head %}{% endblock %}
     </head>

filed/templates/index.html

@@ -34,6 +34,7 @@
                             <span class="file-drag-n-drop-inside">
                                 <span class="file-drag-n-drop-inside-text">
                                     <object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
+                                    <span style="line-height:16pt">
                                         <span id='drag-n-drop-jsonly' style='display:none'>
                                             Drag & drop your files here!
                                         </span>
@@ -43,6 +44,7 @@
                                     </span>
                                 </span>
                             </span>
+                        </span>
                         <script src="/dragndrop-form.js"></script>
                     </label>
                 </p>