JSFiddle - React, Tailwind, and code Playground

by riyadh

HTML

<img src="img/transfer-proof.svg" id="upload-avatar">

<input type="file" id="upload-avatar-btn" class="hide">

<div>
  <label for="upload-avatar-btn">
    Pilih Foto
  </label>
</div>

CSS

.hide {
  display:none;
}

JavaScript

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

        reader.onload = function (e) {
        		$('#upload-avatar').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
		}
}
    
$("#upload-avatar-btn").change(function(){
		readURL(this);
});