Craft -- AJAX image-input (Avatars)

Does anyone have an AJAX Example on image-input for Avatars? As the documentation doesn't have any source code in the .js file

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Trying to make it so the image-input sends the image upload information to a SQL database as well as place the image in the uploads folder. :/

Basically something like this but I have no idea where to place my ajax code or if I'm even doing it somewhat correctly. scripts.bundle.js


var KTImageInput = function(e, t) {
var n = this;
if (null != e) {
var i = {},
r = function() {
n.options = KTUtil.deepExtend({}, i, t), n.uid = KTUtil.getUniqueId("image-input"), n.element = e, n.inputElement = KTUtil.find(e, 'input[type="file"]'), n.wrapperElement = KTUtil.find(e, ".image-input-wrapper"), n.cancelElement = KTUtil.find(e, '[data-kt-image-input-action="cancel"]'), n.removeElement = KTUtil.find(e, '[data-kt-image-input-action="remove"]'), n.hiddenElement = KTUtil.find(e, 'input[type="hidden"]'), n.src = KTUtil.css(n.wrapperElement, "backgroundImage"), n.element.setAttribute("data-kt-image-input", "true"), o(), KTUtil.data(n.element).set("image-input", n)
},
o = function() {
KTUtil.addEvent(n.inputElement, "change", a), KTUtil.addEvent(n.cancelElement, "click", l), KTUtil.addEvent(n.removeElement, "click", s)
},
a = function(e) {
if (e.preventDefault(), null !== n.inputElement && n.inputElement.files && n.inputElement.files[0]) {
if (!1 === KTEventHandler.trigger(n.element, "kt.imageinput.change", n)) return;
var name = document.getElementById("imgUpload").files[0].name;
var form_data = new FormData();
var leadId = $('#leadId').val();
var formData = new FormData();
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("imgUpload").files[0]);
form_data.append("imgUpload", document.getElementById('imgUpload').files[0]);
$.ajax({
url: "update/processSave.php?type=1&leadId",
type: "POST",
data: form_data,
cache: false,
success: function(dataResult){
console.log(estimateAmount);
Swal.fire({
text: "Estimate information updated!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Close",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
var t = new FileReader;
t.onload = function(e) {
KTUtil.css(n.wrapperElement, "background-image", "url(" + e.target.result + ")")
}, t.readAsDataURL(n.inputElement.files[0]), KTUtil.addClass(n.element, "image-input-changed"), KTUtil.removeClass(n.element, "image-input-empty"), KTEventHandler.trigger(n.element, "kt.imageinput.changed", n)
}
},
l = function(e) {
e.preventDefault(), !1 !== KTEventHandler.trigger(n.element, "kt.imageinput.cancel", n) && (KTUtil.removeClass(n.element, "image-input-changed"), KTUtil.removeClass(n.element, "image-input-empty"), KTUtil.css(n.wrapperElement, "background-image", n.src), n.inputElement.value = "", null !== n.hiddenElement && (n.hiddenElement.value = "0"), KTEventHandler.trigger(n.element, "kt.imageinput.canceled", n))
},
s = function(e) {
e.preventDefault(), !1 !== KTEventHandler.trigger(n.element, "kt.imageinput.remove", n) && (KTUtil.removeClass(n.element, "image-input-changed"), KTUtil.addClass(n.element, "image-input-empty"), KTUtil.css(n.wrapperElement, "background-image", "none"), n.inputElement.value = "", null !== n.hiddenElement && (n.hiddenElement.value = "1"), KTEventHandler.trigger(n.element, "kt.imageinput.removed", n))
};
!0 === KTUtil.data(e).has("image-input") ? n = KTUtil.data(e).get("image-input") : r(), n.getInputElement = function() {
return n.inputElement
}, n.goElement = function() {
return n.element
}, n.destroy = function() {
KTUtil.data(n.element).remove("image-input")
}, n.on = function(e, t) {
return KTEventHandler.on(n.element, e, t)
}, n.one = function(e, t) {
return KTEventHandler.one(n.element, e, t)
}, n.off = function(e) {
return KTEventHandler.off(n.element, e)
}, n.trigger = function(e, t) {
return KTEventHandler.trigger(n.element, e, t, n, t)
}
}
};

Hi,

You can place your custom JS script in src/js/layout/my-custom.js to load it globally for all pages or in src/js/custom/my-script.js to load it on demand from assets folder. In this case you will need to use the gulp or webpack build tools to compile the js code into assets folder.

Please run your JS code when document ready using below function:

// Initialize app on document ready
KTUtil.onDOMContentLoaded(function () {
// your js code
});

For more info about using Metronic please check the Theme Documentation
and Video Tutorials

Regards.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(