diff --git a/blocks/FormInput/FormInput.js b/blocks/FormInput/FormInput.js
index 32997b0c1..5a65b49ef 100644
--- a/blocks/FormInput/FormInput.js
+++ b/blocks/FormInput/FormInput.js
@@ -22,9 +22,8 @@ export class FormInput extends UploaderBlock {
initCallback() {
super.initCallback();
- const validationInput = this._createValidationInput();
- this.appendChild(validationInput);
- this._validationInputElement = validationInput;
+ this._validationInputElement = this._createValidationInput();
+ this.appendChild(this._validationInputElement);
this.sub(
'*collectionState',
@@ -43,38 +42,48 @@ export class FormInput extends UploaderBlock {
this._dynamicInputsContainer.innerHTML = '';
if (collectionState.status === 'uploading' || collectionState.status === 'idle') {
- validationInput.value = '';
- validationInput.setCustomValidity('');
+ this._validationInputElement.value = '';
+ this._validationInputElement.setCustomValidity('');
return;
}
if (collectionState.status === 'failed') {
const errorMsg = collectionState.errors[0]?.message;
- validationInput.value = '';
- validationInput.setCustomValidity(errorMsg);
+ this._validationInputElement.value = '';
+ this._validationInputElement.setCustomValidity(errorMsg);
return;
}
const group = collectionState.group ? collectionState.group : null;
if (group) {
- validationInput.value = group.cdnUrl;
- validationInput.setCustomValidity('');
+ this._validationInputElement.value = group.cdnUrl;
+ this._validationInputElement.setCustomValidity('');
return;
}
const cdnUrls = collectionState.allEntries.map((entry) => entry.cdnUrl);
+ if (!this.cfg.multiple && cdnUrls.length === 1) {
+ this._validationInputElement.value = cdnUrls[0];
+ this._validationInputElement.setCustomValidity('');
+ return;
+ }
+
// Remove validation input to prevent it from being submitted
- validationInput.remove();
+ this._validationInputElement.remove();
this._validationInputElement = null;
+ const fr = new DocumentFragment();
+
for (let value of cdnUrls) {
const input = document.createElement('input');
input.type = 'hidden';
input.name = `${this.ctxName}[]`;
input.value = value;
- this._dynamicInputsContainer.appendChild(input);
+ fr.appendChild(input);
}
+
+ this._dynamicInputsContainer.replaceChildren(fr);
}
},
false,
diff --git a/blocks/FormInput/data-output.css b/blocks/FormInput/data-output.css
deleted file mode 100644
index 5a323873a..000000000
--- a/blocks/FormInput/data-output.css
+++ /dev/null
@@ -1,11 +0,0 @@
-lr-form-input {
- display: grid;
-}
-
-lr-form-input > input {
- display: none;
-}
-
-lr-form-input > img {
- height: 100px;
-}
diff --git a/demo/form.html b/demo/form.html
index f1b082104..08596c926 100644
--- a/demo/form.html
+++ b/demo/form.html
@@ -22,17 +22,17 @@
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
- console.log('SUBMIT', e.target);
+ console.log('SUBMIT', [...new FormData(e.target).entries()]);
});
-