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
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<?php echo $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.
