JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="upload" />

<div class="bg">

</div>

CSS

.bg{
    width: 100%;
    height: 240px;
    border: 1px solid #ccc;
}

JavaScript

$(document).on('change', '#upload', addBackgroundImage);

function addBackgroundImage(event) {
    var reader = new FileReader();

    reader.onloadend = function(event) {
        var realMimeType = getRealMimeType(reader);

        if (realMimeType !== 'unknown') {
            var base64 = reader.result;
            console.log(base64)
            $('.bg').css('background-image', 'url('+base64+')');
        } else {
            alert("Please upload a valid image file");
        }
    }
    reader.readAsArrayBuffer(event.target.files[0]);
     $('#upload').val('');
}

function getRealMimeType(reader){
	var arr = (new Uint8Array(reader.result)).subarray(0, 4);
    var header = '';
    var realMimeType;

    for (var i = 0; i < arr.length; i++) {
        header += arr[i].toString(16);
    }

    // magic numbers: http://www.garykessler.net/library/file_sigs.html
    switch (header) {
        case "89504e47":
            realMimeType = "image/png";
            break;
        case "47494638":
            realMimeType = "image/gif";
            break;
        case "ffd8ffDB":
        case "ffd8ffe0":
        case "ffd8ffe1":
        case "ffd8ffe2":
        case "ffd8ffe3":
        case "ffd8ffe8":
            realMimeType = "image/jpeg";
            break;
        default:
            realMimeType = "unknown"; // Or you can use the blob.type as fallback
            break;
    }
    
    return realMimeType;
}