We Keep Coding

How to change the image using javascript

const image_click = document.querySelectorAll('.imgClickBtn');
for (let image_clickBtn of image_click) {
image_clickBtn.addEventListener('click', (e) => {
let parent = image_clickBtn.parentElement;
let file = parent.querySelector('.updateprofile');
let filevalue = "";
file.click();
$('input[type="file"]').change(function(e) {
var fileName = e.target.files[0].name;
filevalue = fileName;
});
image_clickBtn.src = "assets/Blog-post/" + filevalue;
})
}

let imgdisplay;
const ImgBtnX = document.querySelectorAll('.ImgBtnX');
for (let ImgBtnX1 of ImgBtnX) {
ImgBtnX1.addEventListener("click",function () {
let parent = ImgBtnX1.parentElement;
let file = parent.querySelector('.Update_Post');
file.click();
window.imgdisplay = parent.querySelector('.Image_Blog');
})
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
window.imgdisplay.src = e.target.result;
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$('.Update_Post').change(function(e) {
readURL(this)
});
I've already solve my problem using this codes

VueJS - Assigning value to this.property within callback

How can I force
this.json = reader.result;
to assign value to this.json properly in given scope?
Because the value is there, but it is not assigned.
<div id="app" >
<label class="text-reader"><input type="file" v-on:change="getFile($event)"></label>
{{ json }} // it's being set to "test" from getFile function.
</div>
Here's VueJS Code
new Vue
({
el: '#app',
data: {
json: {}
},
methods:
{
getFile: function(ev)
{
this.json = "test";
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
this.json = reader.result;
console.log(this.json); // displays content properly
}
reader.readAsText(file);
}
}
});
What I've been trying so far is just adding some kind of handler
getFile: function(ev)
{
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e)
{
this.callBackHandler(reader.result);
}
reader.readAsText(file);
},
callBackHandler: function(val)
{
console.log(val);
this.json = val;
}
It yells:
TypeError: this.callBackHandler is not a function
Also using callBackHandler as a param.
<label class="text-reader"><input type="file" v-on:change="getFile($event, callBackHandler())"></label>
getFile: function(ev, handler)
{
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(handler)
{
handler(reader.result);
}
reader.readAsText(file);
},
callBackHandler: function(val)
{
console.log(val);
this.json = val;
}

The getFile function should look like this:
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = (e => {
this.callBackHandler(reader.result);
})
}
or
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
var self = this;
reader.onload = function(e){
self.callBackHandler(reader.result);
}
}
or
getFile: function(ev, handler) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
this.callBackHandler(reader.result);
}.bind(this)
}

Solution:
v-on:change="getFile($event)"
(...)
reader.onload = (x =>
{
this.callBackHandler(reader.result);
});

Get value after reader onload

var image is not defined in alert :( please help , thank you so much!
handleBeforeUpload (file, event) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (function () {
var f = reader.result;
});
var image = f;
alert(image)
var photo = {uri: image}

Your f variable is in scope of onload function callback. Define it outside of that function, where you define your reader variable, so it will be available in scope of handleBeforeUpload function
handleBeforeUpload (file, event) {
var reader = new FileReader();
var photo = null;
reader.readAsDataURL(file);
reader.onload = (function () {
f = reader.result;
photo = { uri: f }
});
}

I have used Javascript reader.onload = function(e) in apex code and it's not working

I have tried to pass the uploaded files value to apex method but facing some issues in javascript logic.
I have added alert after reader.onload = function(e) but didn't get any alert when I'm hitting this javascript function.
HTML CODE
function SponsorshipLetter() {
var files = document.getElementById('fileUpload');
var appId = getCookie('apex__app');
var fileName = 'Passport';
var reader = new FileReader();
reader.file = files[0];
reader.onload = function(e) {
alert('Hello 1' + document.getElementById('fileUpload').value);
var att = new sforce.SObject("Attachment");
att = fileName;
att.ContentType = this.file.type;
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
att.Body = (new sforce.Base64Binary(binary)).toString();
alert('attt');
PAP_Finances.sponsorFileUpload(att.Name, att.Body, att.ContentType, appId,
function(result, event) {
return 'Success';
});
}
reader.readAsDataURL(e.target.files[0]);
}

Convert the base 64 encode and pass in JSON

I have two form fields. I want to convert the base 64 encode from image. I want to pass it in JSON format to the next URL.
Sometimes I am getting
uncaught error property_img
How can I do this?
var files = document.getElementById('floorplan_img').files;
if (files.length > 0) {
var file = files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
console.log(reader.result);
var base64 = reader.result;
var str = base64;
var arr = str.split(",");
var floor_img = arr[1];
console.log(floor_img);
};
reader.onerror = function(error) {
console.log('Error: ', error);
};
}
var files1 = document.getElementById('upload_properties').files;
if (files1.length > 0) {
var file1 = files1[0];
var reader1 = new FileReader();
reader1.readAsDataURL(file1);
reader1.onload = function() {
var base64_img = reader1.result;
var str_64 = base64_img;
var arr_str = str_64.split(",");
var property_img = arr_str[1];
console.log(property_img);
};
reader1.onerror = function(error) {
console.log('Error: ', error);
};
}
alert(property_img);
<input type="file" id="floorplan_img">
<input type="file" id="upload_properties">