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
|
// 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)
|
||||||
}
|
}
|
||||||
)()
|
)()
|
|
@ -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;
|
||||||
|
@ -152,4 +154,10 @@ p {
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 32px;
|
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 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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue