try to assign file to the input element

This commit is contained in:
blek 2023-09-30 12:06:28 +10:00
parent 9323cb1a85
commit bf226250ed
Signed by: blek
GPG Key ID: 14546221E3595D0C
2 changed files with 20 additions and 8 deletions

View File

@ -10,6 +10,9 @@
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];
/** @type {HTMLInputElement} */
const input_el = document.getElementById('bfile-formupload-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';
@ -31,14 +34,16 @@
if (!drdrop_enabled) return; if (!drdrop_enabled) return;
if (e.dataTransfer.items) { if (e.dataTransfer.items) {
for (let i = 0; i != e.dataTransfer.items.length; i++) { let file = e.dataTransfer.items[0].getAsFile();
let file = e.dataTransfer.items[i].getAsFile();
text.innerText = 'Processing...'; text.innerText = 'Processing...';
drdrop_enabled = false; drdrop_enabled = false;
await fill_bg(); await fill_bg();
drdrop_enabled = true; 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`; 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 => {

View File

@ -101,6 +101,13 @@ p {
background: var(--header-color); background: var(--header-color);
border: 1px solid var(--header-sec-color); border: 1px solid var(--header-sec-color);
border-radius: 12px; border-radius: 12px;
width: fit-content;
transition: 250ms ease;
}
@media (max-width:667px) {
.card {
width: 100%;
}
} }
.card-title { .card-title {
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;