JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<div class="dragNdropUpload">
	
	<div class="dragNdropUpload_box">
		<div class="dragNdropUpload_box_input_layout">
			<span class="icon far fa-plus-square"></span>
			<span class="text"></span>
		</div><!-- /dragNdropUpload_box_input_layout-->		
		<input type="file" name="dragNdropUpload_box[]" />		
	</div><!-- /dragNdropUpload_box-->
	
</div><!-- /dragNdropUpload-->

CSS

body{
	text-align:center;
}
.dragNdropUpload{
	display:inline-block;
	width:1000px;
	max-width:95%;
	margin:10% 0 0 0;
	padding:20px 0 20px 0;
	border:0px solid #c9ceda;		
}
.dragNdropUpload_box{
	display:inline-block;
	position:relative;
	width:200px;
	height:200px;
	margin:0 20px 0 0;
	border:2px dashed #c9ceda;
	cursor:pointer;
}
.dragNdropUpload_box:hover{
	border:2px dashed #a5adbd;	
}
.dragNdropUpload_box:hover .dragNdropUpload_box_input_layout .icon{
	color:#a5adbd;
}
.dragNdropUpload_box_input_layout{
	display:inline-block;
	width:100%;
	height:100%;
	background-color:transparent;	
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.dragNdropUpload_box_input_layout span{
	display:inline-block;
}
.dragNdropUpload_box_input_layout .icon{
	display:inline-block;
	font-size:68px;
	margin:32% 0 0 0;
	color:#c9ceda;	
}
.dragNdropUpload_box_input_layout .text{
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	padding:5px 0 15px 0;
	font-size:15px;
	font-family:arial;
	color:#adb5c7;
}
.dragNdropUpload_box input{
	display:inline-block;
	width:100%;
	height:100%;
	padding:10px 10px 10px 10px;
	background-color:#eee;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	opacity:0;
	cursor:pointer;
}

JavaScript

$(".dragNdropUpload_box input").change(function(){										
					
					var create_dragNdropUpload_box =  "<div class='dragNdropUpload_box'>"+
														  "<div class='dragNdropUpload_box_input_layout'>"+	
															  "<span class='icon far fa-plus-square'></span>"+
															  "<span class='text'></span>"+
														  "</div><!-- /dragNdropUpload_box_input_layout-->"+
														  "<input type='file' name='dragNdropUpload_box[]' />"+
													  "</div><!-- /dragNdropUpload_box-->";												 													  
													  
									
						$(".dragNdropUpload").append(create_dragNdropUpload_box);
					
						//setTimeout(function(){ 
						
							var getFileName = $(this).val().split('\\').pop();	
							alert(getFileName);	
							
							$(this).parent().find(".dragNdropUpload_box_input_layout .text").html(getFileName);
													
						//}, 1000);					
										
				});//end change