maximum call stack size exceeded ajax,javascript - Maximum call stack size exceeded error - Stack Ov...

I also faced similar issue here is the details

when uploading logo using dropdown logo upload box

cloud_upload

Drag and drop a file here, or click to upload

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {

var reader = new FileReader();

reader.onload = function (event) {

$('.uploader img').attr('src',event.target.result);

}

reader.readAsDataURL(e.target.files[0]);

}

CSS.css

.uploader {

position:relative;

overflow:hidden;

height:100px;

max-width: 75%;

margin: auto;

text-align: center;

img{

max-width: 464px;

max-height: 100px;

z-index:1;

border:none;

}

.drag-drop-zone {

background: rgba(0, 0, 0, 0.04);

border: 1px solid rgba(0, 0, 0, 0.12);

padding: 32px;

}

}

.uploader img{

max-width: 464px;

max-height: 100px;

z-index:1;

border:none;

}

.greyLogoBox {

width: 100%;

background: #EBEBEB;

border: 1px solid #D7D7D7;

text-align: center;

height: 100px;

padding-top: 22px;

box-sizing: border-box;

}

#filePhoto{

position:absolute;

width:464px;

height:100px;

left:0;

top:0;

z-index:2;

opacity:0;

cursor:pointer;

}

before correction my code was :

function handleImage(e) {

var reader = new FileReader();

reader.onload = function (event) {

οnclick="$('#filePhoto').click()"

$('.uploader img').attr('src',event.target.result);

}

reader.readAsDataURL(e.target.files[0]);

}

The error in console:

I solved it by removing οnclick="$('#filePhoto').click()" from div tag.