JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<form>
  <input type="file" id="file-preview" name="test_file" multiple>
      <figure></figure>
</form>
<div class="file-info"></div>

JavaScript

$('input[type=file]#file-preview').change(function(event) {
   var img = $(this),
       file = [];
       
   for (var i = 0; i < $(this).get(0).files.length; i++) {
     file.push($(this).get(0).files[i].name);
   }
   
   img.parent().find('figure').children('img').remove();
   $('.file-info').text('');
   $('.file-info').text('');

    for (var i = 0; i < $(this).get(0).files.length; i++) {
      var reader = new FileReader();

      reader.onload = function(e) {
          console.log(e.target.result)
          img.parent().find('figure').addClass('file-img').append('<img src="'+ e.target.result +'" />');
       }
      reader.readAsDataURL(this.files[i]);
    }
 });