JSFiddle - React, Tailwind, and code Playground

by JOHN_748

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<img id="preview-image" class="img-prev rounded" src="#" alt="Upload" onerror=this.src="../assets/images/myfolder/no_image.png" />


<input type="file" name="featured_image" id="customFile" onchange="readURL(this);" required>

JavaScript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#preview-image')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
        };

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