I use the code below to browse images on PC and then show them in a browser on my page. It shows images but pixels which supposed to be transparent are just white or grey, it simply doesn't take into account alpha channel. Is there any way to somehow fix it? I don't really understand the whole mechanism behind image loading in JS, if I load explicitly with relative path specified in css or html files then it works fine but when using this method for some reason it fails to work properly with transparency.

BLOCK_PICTURE.addEventListener("click", function (e) {
    if (!currentElement) return;
    let input = document.createElement("input");
    input.type = "file";
    input.addEventListener("change", function () {
        const reader = new FileReader();
        reader.addEventListener("load", function () {
            mainImage = reader.result;
            document.getElementById(currentElement.name).style.backgroundImage = `url(${mainImage})`;
            blocks[currentElement.count].background = mainImage;
        });
        reader.readAsDataURL(this.files[0]);
    });
    input.click();
});