drop file functionality

This commit is contained in:
blek 2023-09-30 01:45:12 +10:00
parent 69a695f9fb
commit 1e6f2aeb11
Signed by: blek
GPG Key ID: 14546221E3595D0C
5 changed files with 62 additions and 6 deletions

1
filed/static/delay.js Normal file
View File

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

View File

@ -1,11 +1,55 @@
( (
() => { () => {
// display the js only text // 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 drag_rop = document.getElementsByClassName('file-drag-n-drop-inside')[0];
const dr_rop_t = document.getElementsByClassName('file-drag-n-drop-inside-text')[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)
} }
)() )()

View File

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

View File

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

View File

@ -34,12 +34,14 @@
<span class="file-drag-n-drop-inside"> <span class="file-drag-n-drop-inside">
<span class="file-drag-n-drop-inside-text"> <span class="file-drag-n-drop-inside-text">
<object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/> <object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
<span id='drag-n-drop-jsonly' style='display:none'> <span style="line-height:16pt">
Drag & drop your files here! <span id='drag-n-drop-jsonly' style='display:none'>
Drag & drop your files here!
</span>
<noscript>
Click to upload your files!
</noscript>
</span> </span>
<noscript>
Click to upload your files!
</noscript>
</span> </span>
</span> </span>
</span> </span>