JSFiddle - React, Tailwind, and code Playground

HTML

<input name="images[]" id="images" multiple="" type="file">
<div class="container">

</div>

JavaScript

var SomeCl = {
	count: 0,
  init: function(){
  	$('#images').change(this.onInputChange);
  },
  onInputChange: function() {
  	SomeCl.addM(this.files);
  },
  addM: function(files) {
		for(var i=0;i<4;i++) {
      

      if(files[i].type.substr(0,5) == 'image') {
      (function(file) {
					var reader = new FileReader();
          var info = {
					name: files[i].name,
					size: files[i].size,
					type: files[i].type,
					preview: '/newtest/resources/images/dvlogo.png'
				};
					reader.onload = function(e) {
          	SomeCl.count++;
						info.preview = e.target.result;
						console.log(SomeCl.count + " -")
						SomeCl.processM(info);
					};
					reader.readAsDataURL(files[i]);
          })(files[i]);
				}else{
					this.processFile(info);
				}
    }
  },
  processM: function(file) {
  	console.log(file);
    $('.container').append('11111111111111111<br>');
  },
}
SomeCl.init();