JSFiddle - React, Tailwind, and code Playground

HTML

<header>
        <h1>File API - FileReader (Text)</h1>
    </header>
    <article>
        <label for="files">Select a file: </label>
        <input id="files" type="file" onchange="readURL(this);" /><br>
        div<div id="result" style="height: 300px;
    width: 100%;"></div><br>
        img<img src='' id="img"><br>
    </article>

JavaScript

var readURL;
$(function() {
   $("#files").on('change', readURL); 
});

    //Check File API support
    function readURL() {
            var input = this;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = (function (tFile) {
                    return function (evt) {
                      //$('#img').attr('src', evt.target.result);
                      
                        $('#result').css({'background-image': 'url('+evt.target.result+')','background-size': '200px 200px', 'background-repeat': 'no-repeat', 'background-position':'center'})
                    };
                  }(input.files[0]));
               reader.readAsDataURL(input.files[0]);
            }
        }