Strange behavior with FileReader()

Question

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