How to change the image using javascript - 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

Related

First value is missing in excel file in XLSX JS

I am trying to read excel file in Javascript with the plugin xlsx.js . I can read all cell values except the first value. Here is my code:
let numArr = [];
selectFile(event) {
let reader = new FileReader();
reader.onload = () => {
const data = reader.result;
const workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach((sheetName) => {
// Here is your object
const XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
// var json_object = JSON.stringify(XL_row_object);
for (let i = 0; i < XL_row_object.length; i++) {
// this.groupNumsArr.push(XL_row_object[i]['number']);
const theNum = Object.values(XL_row_object[i])[0].toString();
numArr.push(theNum);
}
});
};
reader.readAsBinaryString(event.target.files[0]); }
The api gives first row as key so You can try this
for (let i = 0; i < XL_row_object.length; i++) {
var theNum = '';
if(i == 0)
{
theNum = Object.keys(XL_row_object[i])[0].toString();
numArr.push(theNum);
}
// this.groupNumsArr.push(XL_row_object[i]['number']);
theNum = Object.values(XL_row_object[i])[0].toString();
numArr.push(theNum);
}

How to change image preview on button click

I have these codes to display the names of the files selected from input and it will preview the FIRST image:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var filename = input.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
var files = $('#my_file')[0].files;
for (var i = 0; i < files.length; i++) {
$("#files").append('<div class="filename"><span name="fileNameList">'+files[i].name+'</span></div>');
}
$("#nextBtn").on("click",function(){
})
$('#myImg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
What i want to do is that when i click on the "next" button,it will go to the next image selected or if i click on the "prev" button,it will go to the previous image(the last image if im displaying the first one).How do i go about doing this?Thank You.
UPDATE:
var fileInput = document.getElementById("my_file");
$(fileInput).on("change",function(event){
var next = document.getElementById("nextBtn");
next.onclick = function(xFlip){
curImage = curImage+xFlip;
var files = event.target.files;
if(curImage > files.length){
curImage = 1;
}
if(curImage == 0){
curImage = files.length;
}
$("#myImg").attr('src',files[curImage-1]);
};
console.log(document.getElementById("myImg").getAttribute("src"));
});
I did it this way as the images are retrieved from input type file multiple.
https://jsfiddle.net/bfr6wp7e/2/
Thanks for the challenge, it was my first meeting with the File API :)
Here is the jsFiddle with what I believe is the correct answer to your question:
https://jsfiddle.net/mkbctrll/aq9Laaew/300936/
JS part
const fileInupt = document.getElementById('fileInput')
const fileList = document.getElementById('fileList')
const slickSettings = {
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true
}
const initSlickCarousel = (target, settings) => {
$(target).slick(settings);
}
const handleInputChange = (event) => {
console.log('We are handling it sir!')
const filesArray = Array.from(event.target.files)
filesArray.map((singleFile) => {
const outputImg = document.createElement('img')
const fileReader = new FileReader()
outputImg.className = 'img-thumbnail'
// Let's read it as data url - onload won't return a thing without it
fileReader.readAsDataURL(singleFile)
fileReader.onload = (event) => { outputImg.src = event.target.result }
console.log(outputImg)
fileList.appendChild(outputImg)
})
initSlickCarousel(fileList, slickSettings)
}
if(window.File && window.FileReader && window.FileList) { // check if browser can handle this
console.log('We are good to go sir!')
fileInput.addEventListener('change', handleInputChange, false)
} else {
alert('File features are not fully supported. Please consider changing the browser (newest Chrome or Mozilla).')
}
Though it won't be possible for me to get a grasp on that tech if not for the following sources:
https://www.html5rocks.com/en/tutorials/file/dndfiles/
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload
Sample code for Prev and Next image slide.
var numImages = 4;
var curImage = 1;
var imgArray =[
"one.jpg",
"two.jpg",
"three.jpg",
"four.jpg"
];
function imageShow( xflip ) {
curImage = curImage + xflip;
if (curImage > numImages)
{ curImage = 1 ; }
if (curImage == 0)
{ curImage = numImages ; }
document.images[2].src = imgArray[curImage - 1];
}
HTML buttons:
<input type="button" value="<< Prev" onclick="imageShow(-1)">
<input type="button" value="Next >>" onclick="imageShow(1)">

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">

How to make a list of image preview

I have the following code for image preview
$("#weeklyOfferImages").change(function(){
readURLWeekly(this);
});
function readURLWeekly(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.weeklyPreview').append('<img data-src="holder.js/140x140" src="'+e.target.result'"class="offer-image img-polaroid"/>');
},
reader.readAsDataURL(input.files[0]);
}
}
this code only display one image at a time.
How can i make it display multiple images. for example the files object contains 4 files.
you only display "0" -> img input.files[0]
dynamic with length - iterating the whole array
function readURLWeekly(input) {
if(input.files)
for(var i = 0; i < input.files.length; i++) {
if (input.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.weeklyPreview').append('<img data-src="holder.js/140x140" src="' + e.target.result + '" class="offer-image img-polaroid"/>');
},
reader.readAsDataURL(input.files[i]);
}
}
}
Maybe something like this :
$("#weeklyOfferImages").change(function(){
readURLWeekly(this);
});
function readURLWeekly(input) {
if (input.files) {
for (var i=0;i<4;i++) {
if (input.files[i]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.weeklyPreview').append('<img data-src="holder.js/140x140" src="'+e.target.result'"class="offer-image img-polaroid"/>');
},
reader.readAsDataURL(input.files[i]);
} else {
break;
}
}
}
}

Categories