diff --git a/UI/Component/Form.js b/UI/Component/Form.js index 5deb1aa..5824426 100644 --- a/UI/Component/Form.js +++ b/UI/Component/Form.js @@ -173,8 +173,38 @@ export class Form { for (let i = 0; i < length; ++i) { this.bindUpdatable(update[i], id); } + + const imgPreviews = this.forms[id].getImagePreviews(); + length = imgPreviews === null ? 0 : imgPreviews.length; + for (let i = 0; i < length; ++i) { + this.bindImagePreview(imgPreviews[i], id); + } }; + /** + * Create the new input + * + * @param {string} imageUpload Create form + * @param {Object} id Id + * + * @return {void} + * + * @since 1.0.0 + */ + bindImagePreview(imageUpload, id) { + const self = this; + + imageUpload.addEventListener('change', function () { + const formElement = document.getElementById(id); + const preview = formElement.querySelector('img#preview-' + imageUpload.getAttribute('name')); + + preview.src = window.URL.createObjectURL(imageUpload.files[0]); + preview.onload = function () { + window.URL.revokeObjectURL(this.src); + } + }); + } + /** * Unbind form * @@ -416,7 +446,7 @@ export class Form { subMain.appendChild(newEle); // todo: consider to do ui action as success inject to the backend request... maybe optional because sometimes there will be no backend call? - // todo: sometimes the response data needs to be put into the frontend (e.g. image uploade, only after upload the backend endpoint will be known and not in advance) + // todo: sometimes the response data needs to be put into the frontend (e.g. image upload, only after upload the backend endpoint will be known and not in advance) // todo: if a column has a form in the template the id of the form needs to be set unique somehow (e.g. remove button in form) // todo: bind removable @@ -590,7 +620,7 @@ export class Form { ) { const request = new Request(values[i].getAttribute('data-tpl-value')); request.setResultCallback(200, function(xhr) { - matches[c].value = xhr.response; + self.setValueOfElement(matches[c], xhr.response); // todo: the problem with this is that the response must only return the markdown or whatever is requested. It would be much nicer if it would also possible to define a path for the response in case a json object is returned which is very likely }); @@ -933,7 +963,7 @@ export class Form { setValueOfElement(src, value) { - switch (src.tagName.toLowerCase) { + switch (src.tagName.toLowerCase()) { case 'div': case 'pre': case 'article': @@ -947,13 +977,17 @@ export class Form { setTextOfElement(src, value) { - switch (src.tagName.toLowerCase) { + switch (src.tagName.toLowerCase()) { case 'div': case 'pre': case 'article': case 'section': src.innerHTML = value; break; + case 'textarea': + // textarea only has value data in it's content and nothing else! + // @todo: check other html tags as well or maybe just don't use the -text attribute and be fine? + break; default: src.value = value; } diff --git a/Views/FormView.js b/Views/FormView.js index dc600c0..fd49e5f 100644 --- a/Views/FormView.js +++ b/Views/FormView.js @@ -119,6 +119,20 @@ export class FormView { ); }; + /** + * Get submit elements + * + * @return {Object} + * + * @since 1.0.0 + */ + getImagePreviews() { + // todo: question, exclude save/remove button? maybe not because they also submit data right? + return document.querySelectorAll( + '#' + this.id + ' input[type=file].preview' + ); + }; + /** * Get edit elements *