Strange behavior with FileReader()

EDIT: After searching a lot of websites for an answer, I finally found !I found this site https://codepen.io/Anveio/pen/XzYBzX and I modified (a lot of) my code based on the code and now everything is working.

Apparently I needed to wrap my code around a Promise and Await to be able to return the content of the file.

I'm having a small problem with my code.The case is: I have a element and a button to browse for a file. When I click the button I can select an image (jpg or png) max size of 2mbs.The "strange" is this, when I click the button for the first time, nothing shows on the <img>, but if a click the second time and choose the same image, the image appears. If I click again and choose another image, the same thing happens.

The question is: how can I resolve resolve this problem ?

$(".brw").on("click", function() {    var dtid = $(this).attr("data-id");    var fileDialog = $('<input type="file" accept=".png, .jpg">');    fileDialog.click().on("change",function() {        var oName = $(this)[0].files[0].name;        var lastDot = oName.lastIndexOf('.');        var oExt = oName.substring(lastDot + 1);        var oSize = Math.round($(this)[0].files[0].size / 1024);        if(oName == undefined || oName == 0) return;        if(oExt != "jpg" && oExt != "png") return;        if(oSize > 2000) {            $('#in'+dataId).show().delay(3000).fadeOut(300); // Show alert about image size larger than 2mbs            return;        }        var reader = new FileReader();        reader.onload = function(event) {            // Add image to the corresponding <img> element            $('#'+ dtid).attr("src", event.target.result);            // Get the size of the selected image, adjust the aspect ratio and then modify the size of the corresponding <img> element            var newimg = new Image();            newimg.src = event.target.result;            var xheight = newimg.height;            var xwidth = newimg.width;            var ratio = Math.min(1, 320 / xwidth, 300 / xheight);              $('#'+dtid).css({width:xwidth * ratio, height:xheight * ratio});            // -----------------------------------        };        reader.onerror = function(event) {            alert("I AM ERROR: " + event.target.error.code);        };        reader.readAsDataURL($(this)[0].files[0]);        console.log('Trigger  : '+ dtid);        console.log('Nome     : '+ oName);        console.log('Extensão : '+ oExt);        console.log('Tamanho  : '+ oSize);    });    return false;});

The element.

<center><img src="imgs/n.png" width="350px" height="300px" style="border: 2px dashed red" id="i1" alt=""/></center><input type="button" value="Browse..." class="imgs brw" data-id="i1" />

Thank you

So, the code works, but only when I select the image for the second time.What I expect is to click the button for the first time and the image appears on element