drop file functionality
This commit is contained in:
parent
69a695f9fb
commit
1e6f2aeb11
|
@ -0,0 +1 @@
|
|||
const delay=async m=>{return new Promise(r=>setTimeout(r,m))}
|
|
@ -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)
|
||||
}
|
||||
)()
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue