JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data">

	<img class="uploadFileImg" src="http://eurotechdentallab.com/yahoo_site_admin/assets/images/file_upload_icon.173120036_std.jpg" alt="Icon file"> <br /><br/>
	<span class="fileNameBox"></span>
	<input type='file' name='file[]' class=' form-control file-field hide' max_files_upload='2' accept="image/jpg,image/png,image/jpeg,image/gif" style="display: none" multiple/>

</form>

CSS

.hideBox {display: none}

JavaScript

$(".uploadFileImg").on('click',function(){
	   $(".file-field").trigger('click'); 
	   
		var new_field = $("<input type='file[]' class='form-control file-field hide' style='display: none'>");
		$(this).closest('form').append(new_field);	   
	   
	});	
	
// validation for images
	$(function() {
		$('input.file-field').on('change', function(e) {
            alert(this.files.length);
			var filename = $(this).val();
			if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(filename)) {
				this.value = '';
				$(this).closest('form').find('.fileNameBox').html("<span class='valid_msg'>Images only!</span>");
			}
			else
				$(this).closest('form').find('.fileNameBox').html("IMAGE: " + filename + " <button class='clear_file btn btn-default btn-xs'>REMOVE</button>");
	  });
	});
	
// remove file button
	$(function() {
		$(document).on('click','.clear_file',function() {
			$(this).closest('form').find('input.file-field').val("")
			$(this).closest('form').find('.fileNameBox').html("");
	  });
	});