JSFiddle - React, Tailwind, and code Playground

by Chance Nursey-Bush

HTML

<input type='file' id="upload" onchange="readURL(this)" />
    <img id="img" src="#" alt="your image" />

JavaScript

function x(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

window.readURL = x;