blek
/
bfile
1
0
Fork 0
Code Issues 6 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

show cool animation on button file select

This commit is contained in:
blek 2023-09-30 12:19:48 +10:00
parent 25948b007a
commit 107627f357
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
filed/static/dragndrop-form.js
View File

@ -13,6 +13,24 @@
/** @type {HTMLInputElement} */ /** @type {HTMLInputElement} */
const input_el = document.getElementById('bfile-formupload-file'); const input_el = document.getElementById('bfile-formupload-file');
/** @param {File} file */
async function selectFile(file) {
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`;
const transfer = new DataTransfer();
transfer.items.add(file);
input_el.files = transfer.files;
}
input_el.onchange = e => {
const file = input_el.files[0]
selectFile(file);
}
function drag_end() { function drag_end() {
root_drag_rop.style.background = 'var(--header-sec-color)' root_drag_rop.style.background = 'var(--header-sec-color)'
drag_rop.style.borderColor = '#656565'; drag_rop.style.borderColor = '#656565';
@ -33,17 +51,9 @@
if (!drdrop_enabled) return; if (!drdrop_enabled) return;
if (e.dataTransfer.items) { if (e.dataTransfer.items.length != 0) {
let file = e.dataTransfer.items[0].getAsFile(); let file = e.dataTransfer.items[0].getAsFile();
text.innerText = 'Processing...'; selectFile(file);
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`;
const transfer = new DataTransfer();
transfer.items.add(file);
input_el.files = transfer.files;
} }
}); });
drag_rop.addEventListener('dragover', e => { drag_rop.addEventListener('dragover', e => {