diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius index 4430d7add..3337777cf 100644 --- a/templates/standalone/inputs.julius +++ b/templates/standalone/inputs.julius @@ -24,10 +24,12 @@ }); }; + // allows for multiple file uploads with separate inputs window.utils.reactiveFileUpload = function(input, parent) { var currValidInputCount = 0; var addMore = false; var inputName = input.getAttribute('name'); + var isMulti = input.getAttribute('multiple') ? true : false; // FileInput PseudoClass function FileInput(container, input, label, remover) { this.container = container; @@ -42,7 +44,7 @@ this.remove = function() { this.container.remove(); } - this.isValid = function() { + this.wasValid = function() { return this.container.classList.contains('file-input__container--valid'); } } @@ -61,7 +63,9 @@ parent.classList.add('form-group--valid') } submitBtn.removeAttribute('disabled'); - addNextInput(); + if (isMulti) { + addNextInput(); + } } else { if (parent.classList.contains('form-group')) { parent.classList.remove('form-group--valid') @@ -78,14 +82,16 @@ var fileName = filePath[filePath.length - 1]; fileInput.label.innerHTML = fileName; // increase count if this field was empty previously - if (!fileInput.isValid()) { + if (!fileInput.wasValid()) { currValidInputCount++; } fileInput.container.classList.add('file-input__container--valid') // show next input } else { - currValidInputCount--; - fileInput.remove(); + if (isMulti) { + currValidInputCount--; + } + clearInput(fileInput); } updateForm(); }); @@ -95,26 +101,36 @@ fileInput.input.addEventListener('blur', function() { fileInput.container.classList.remove('pseudo-focus'); }); - fileInput.label.addEventListener('click', function() { - fileInput.input.click(); - }); fileInput.remover.addEventListener('click', function() { - if (fileInput.isValid()) { + if (fileInput.wasValid()) { currValidInputCount--; } - fileInput.remove(); - updateForm(); + clearInput(fileInput); }); } + + // clears or removes fileinput based on multi-file or not + function clearInput(fileInput) { + if (isMulti) { + fileInput.remove(); + } else { + fileInput.container.classList.remove('file-input__container--valid') + fileInput.label.innerHTML = ''; + } + updateForm(); + } // create new wrapped input element with name name function makeInput(name) { var cont = document.createElement('div'); - var desc = document.createElement('span'); + var desc = document.createElement('label'); var nextInput = document.createElement('input'); var remover = document.createElement('div'); cont.classList.add('file-input__container'); desc.classList.add('file-input__label', 'btn'); + nextInput.classList.add('js-file-input'); + desc.setAttribute('for', name + '-' + currValidInputCount); remover.classList.add('file-input__remover'); + nextInput.setAttribute('id', name + '-' + currValidInputCount); nextInput.setAttribute('name', name); nextInput.setAttribute('type', 'file'); cont.appendChild(nextInput); diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 67a49fd45..10b1b33b8 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -223,7 +223,7 @@ input[type="checkbox"]:checked::after { } /* CUSTOM FILE INPUT */ -input[type="file"] { +input[type="file"].js-file-input { color: white; width: 0.1px; height: 0.1px;