less complicated multifile-upload
This commit is contained in:
Felix Hamann
parent
7a97235481
commit
2971e40032
@ -7,8 +7,8 @@ $forall FileUploadInfo{..} <- fileInfos
|
||||
<label for=#{fuiHtmlId}>
|
||||
|
||||
$# new files
|
||||
<input type="file" name=#{fieldName} multiple>
|
||||
<input type="file" name=#{fieldName} id=#{fieldId} multiple :req:required="required">
|
||||
|
||||
<div .file-input__unpack>
|
||||
<label for=#{fieldId}_zip>ZIPs entpacken
|
||||
<input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips} :req:required>
|
||||
<input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
|
||||
|
||||
@ -4,133 +4,65 @@
|
||||
window.utils = window.utils || {};
|
||||
|
||||
// allows for multiple file uploads with separate inputs
|
||||
window.utils.reactiveFileUpload = function(input, formGroup) {
|
||||
var currValidInputCount = 0;
|
||||
var addMore = false;
|
||||
var inputName = input.getAttribute('name');
|
||||
var isMulti = input.hasAttribute('multiple') ? true : false;
|
||||
var wrapper = formGroup;
|
||||
// FileInput PseudoClass
|
||||
function FileInput(container, input, label, remover) {
|
||||
this.container = container;
|
||||
this.input = input;
|
||||
this.label = label;
|
||||
this.remover = remover;
|
||||
addListener(this);
|
||||
window.utils.initializeFileUpload = function(input) {
|
||||
var isMulti = input.hasAttribute('multiple');
|
||||
var fileList = addFileList();
|
||||
var label = addFileLabel();
|
||||
|
||||
this.addTo = function(parentElement) {
|
||||
parentElement.appendChild(this.container);
|
||||
}
|
||||
this.remove = function() {
|
||||
this.container.remove();
|
||||
}
|
||||
this.wasValid = function() {
|
||||
return this.container.classList.contains('file-input__container--valid');
|
||||
}
|
||||
}
|
||||
function addNextInput() {
|
||||
var inputs = wrapper.querySelectorAll('.file-input__container');
|
||||
if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
|
||||
makeInput(inputName).addTo(wrapper);
|
||||
}
|
||||
}
|
||||
// updates submitbutton and form-group-stripe
|
||||
function updateForm() {
|
||||
var submitBtn = formGroup.parentElement.querySelector('[type=submit]');
|
||||
formGroup.classList.remove('form-group--has-error');
|
||||
if (currValidInputCount > 0) {
|
||||
if (formGroup.classList.contains('form-group')) {
|
||||
formGroup.classList.add('form-group--valid')
|
||||
}
|
||||
if (isMulti) {
|
||||
addNextInput();
|
||||
}
|
||||
} else {
|
||||
if (formGroup.classList.contains('form-group')) {
|
||||
formGroup.classList.remove('form-group--valid')
|
||||
}
|
||||
}
|
||||
}
|
||||
// addseventlistener destInput
|
||||
function addListener(fileInput) {
|
||||
fileInput.input.addEventListener('change', function(event) {
|
||||
if (fileInput.input.value.length > 0) {
|
||||
// update label
|
||||
var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
|
||||
var fileName = filePath[filePath.length - 1];
|
||||
fileInput.label.innerHTML = fileName;
|
||||
// increase count if this field was empty previously
|
||||
if (!fileInput.wasValid()) {
|
||||
currValidInputCount++;
|
||||
}
|
||||
fileInput.container.classList.add('file-input__container--valid')
|
||||
// show next input
|
||||
} else {
|
||||
if (isMulti) {
|
||||
currValidInputCount--;
|
||||
}
|
||||
clearInput(fileInput);
|
||||
}
|
||||
updateForm();
|
||||
});
|
||||
fileInput.input.addEventListener('focus', function() {
|
||||
fileInput.container.classList.add('pseudo-focus');
|
||||
});
|
||||
fileInput.input.addEventListener('blur', function() {
|
||||
fileInput.container.classList.remove('pseudo-focus');
|
||||
});
|
||||
fileInput.remover.addEventListener('click', function() {
|
||||
if (fileInput.wasValid()) {
|
||||
currValidInputCount--;
|
||||
}
|
||||
clearInput(fileInput);
|
||||
function renderFileList(files) {
|
||||
fileList.innerHTML = '';
|
||||
Array.from(files).forEach(function(file, index) {
|
||||
var fileDisplayEl = document.createElement('li');
|
||||
fileDisplayEl.innerHTML = file.name;
|
||||
fileList.appendChild(fileDisplayEl);
|
||||
});
|
||||
}
|
||||
|
||||
// clears or removes fileinput based on multi-file or not
|
||||
function clearInput(fileInput) {
|
||||
function updateLabel(files) {
|
||||
if (isMulti) {
|
||||
fileInput.remove();
|
||||
label.innerText = files.length + ' Dateien ausgwählt';
|
||||
} else {
|
||||
fileInput.container.classList.remove('file-input__container--valid')
|
||||
fileInput.label.innerHTML = '';
|
||||
label.innerHTML = files[0].name;
|
||||
}
|
||||
updateForm();
|
||||
}
|
||||
// create new wrapped input element with name name
|
||||
function makeInput(name) {
|
||||
var cont = document.createElement('div');
|
||||
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);
|
||||
cont.appendChild(desc);
|
||||
cont.appendChild(remover);
|
||||
return new FileInput(cont, nextInput, desc, remover);
|
||||
|
||||
function addFileList() {
|
||||
var list = document.createElement('ol');
|
||||
list.classList.add('file-input__list');
|
||||
input.parentElement.appendChild(list);
|
||||
return list;
|
||||
}
|
||||
|
||||
function addFileLabel() {
|
||||
var label = document.createElement('label');
|
||||
label.classList.add('file-input__label');
|
||||
// interpolate translated String here
|
||||
label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
|
||||
label.setAttribute('for', input.id);
|
||||
input.parentElement.insertBefore(label, input);
|
||||
return label;
|
||||
}
|
||||
|
||||
function addMultiInfo() {
|
||||
var info = document.createElement('div');
|
||||
info.classList.add('file-input__info');
|
||||
// interpolate translated String here
|
||||
info.innerText = '(Mehrere Dateien mit Shift oder Strg auswählen)';
|
||||
input.parentElement.insertBefore(info, input);
|
||||
}
|
||||
|
||||
// initial setup
|
||||
function setup() {
|
||||
var newInput = makeInput(inputName);
|
||||
if (isMulti) {
|
||||
wrapper = document.createElement('div');
|
||||
wrapper.classList.add('file-input__wrapper');
|
||||
console.log(wrapper);
|
||||
// TODO: fix file input
|
||||
formGroup.insertBefore(wrapper, input);
|
||||
}
|
||||
input.remove();
|
||||
newInput.addTo(wrapper);
|
||||
updateForm();
|
||||
input.classList.add('file-input__input--hidden');
|
||||
if (isMulti) {
|
||||
addMultiInfo();
|
||||
}
|
||||
setup();
|
||||
input.addEventListener('change', function() {
|
||||
if (isMulti) {
|
||||
renderFileList(input.files);
|
||||
}
|
||||
|
||||
updateLabel(input.files);
|
||||
});
|
||||
}
|
||||
|
||||
// to remove previously uploaded files
|
||||
@ -194,11 +126,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// initialize file-upload-fields
|
||||
Array.from(document.querySelectorAll('input[type="file"]')).forEach(function(inp) {
|
||||
var formGroup = inp.parentNode;
|
||||
while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
|
||||
formGroup = formGroup.parentNode;
|
||||
}
|
||||
window.utils.reactiveFileUpload(inp, formGroup);
|
||||
window.utils.initializeFileUpload(inp);
|
||||
});
|
||||
|
||||
// initialize file-checkbox-fields
|
||||
|
||||
@ -243,114 +243,17 @@ input[type="checkbox"]:checked::after {
|
||||
}
|
||||
|
||||
/* CUSTOM FILE INPUT */
|
||||
input[type="file"].js-file-input {
|
||||
color: white;
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
.file-input__wrapper {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
.file-input__container,
|
||||
.file-checkbox__container,
|
||||
.file-input__unpack {
|
||||
grid-column-start: 2;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.file-input__label,
|
||||
.file-input__remover,
|
||||
.file-checkbox__label,
|
||||
.file-checkbox__remover {
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
padding: 5px 13px;
|
||||
color: var(--color-lightwhite);
|
||||
.file-input__label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.file-input__label,
|
||||
.file-checkbox__label {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
}
|
||||
.file-checkbox__label {
|
||||
background-color: var(--color-grey);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.file-input__label.btn,
|
||||
.file-checkbox__label.btn {
|
||||
padding: 5px 13px;
|
||||
}
|
||||
.file-input__label::after,
|
||||
.file-input__label::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: white;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
top: 14px;
|
||||
top: 50%;
|
||||
left: 12px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.file-input__label::after {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
.file-input__label::before {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.file-checkbox__checkbox {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.file-input__remover {
|
||||
display: none;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background-color: var(--color-warning);
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.file-input__remover::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
top: 14px;
|
||||
left: 12px;
|
||||
background-color: white;
|
||||
}
|
||||
.file-input__container--valid > .file-input__label {
|
||||
display: inline-block;
|
||||
background-color: var(--color-light);
|
||||
color: white;
|
||||
padding: 10px 17px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.file-checkbox__container--checked > .file-checkbox__label {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-lighter);
|
||||
.file-input__list {
|
||||
|
||||
&.btn:hover {
|
||||
background-color: var(--color-lighter);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.file-input__container--valid > .file-input__label::before,
|
||||
.file-input__container--valid > .file-input__label::after {
|
||||
content: none;
|
||||
}
|
||||
.file-input__container--valid > .file-input__remover {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.file-input__wrapper,
|
||||
.file-input__container,
|
||||
.file-checkbox__container,
|
||||
.file-input__unpack {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.file-input__input--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user