fix(form-input): do not append [] postfix to input name when `multi…

…ple` is falsy (#602) Co-authored-by: nd0ut <[email protected]>
uploadcare · Feb 12, 2024 · 4722c4d · 4722c4d
1 parent 87d1048
commit 4722c4d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 25 deletions.
diff --git 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
diff --git 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()]);
     });
   </script>
 </head>
 
-<lr-config ctx-name="my-uploader" pubkey="demopublickey" multiple multiple-min="2" multiple-max="3" img-only group-output></lr-config>
+<lr-config ctx-name="my-uploader" pubkey="demopublickey" multiple-min="1" multiple-max="10" img-only></lr-config>
 
 <form>
   <lr-file-uploader-regular style="position: relative; display: inline-block;" ctx-name="my-uploader" css-src="./blocks/themes/lr-basic/index.css">
     <lr-form-input
-      style="position: absolute; bottom: 0px; left: 50%"
+      style="position: absolute; bottom: 0px; left: 50%; pointer-events: none;"
       ctx-name="my-uploader"
     ></lr-form-input>
   </lr-file-uploader-regular>