JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<p class="v-1">
  <input type="file" name="file" class="profile-img">
  <img src="" class="profile-img-tag" width="200px" />
</p>

<p class="v-3">
  <input type="file" name="file" class="profile-img">
  <img src="" class="profile-img-tag" width="200px" />
</p>

<p class="v-5">
  <input type="file" name="file" class="profile-img">
  <img src="" class="profile-img-tag" width="200px" />
</p>

JavaScript

function readURL(input) {

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

    reader.onload = function(e) {
       $(input).parent('p').find('img').attr('src', e.target.result);
       console.log(e.target.result)
    }
    
    reader.readAsDataURL(input.files[0]);
    
  }
  
}

$(".profile-img").change(function() {
  readURL(this);
});