Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix file upload in custom photo upload control

Browse source 
Hat tip to https://web.dev/articles/more-capable-form-controls for the
details.
This commit is contained in:
Eli Ribble 2026-01-31 02:18:22 +00:00
parent 64cd2f49dc
commit 612f2fba77
No known key found for this signature in database
2 changed files with 17 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
html/static/js/photo-upload.js
View file

@ -1,8 +1,13 @@
class PhotoUpload extends HTMLElement {
// make element form-associated
static formAssociated = true;
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.render();
this.fileInput = this.shadowRoot.getElementById("photos");
this.internals = this.attachInternals();
}
connectedCallback() {
@ -15,7 +20,17 @@ class PhotoUpload extends HTMLElement {
// Handle photo selection
photoInput.addEventListener('change', () => {this._handlePhotoSelection()});
photoInput.addEventListener("input", (event) => {
let value = event.textContent;
const n = "photos";
let i = 0
const entries = new FormData();
for (const file of event.target.files) {
entries.append(n + i, file);
i = i + 1
}
this.internals.setFormValue(entries);
});
// Handle drag and drop
const photoDropArea = this.shadowRoot.querySelector('#photoDropArea');