JSFiddle - React, Tailwind, and code Playground
HTML
<div class="poster">
<div class="button fileButton">Загрузить</div>
<input type="file" class="fileInput" name="files" />
</div>
<div class="poster">
<div class="button fileButton">Загрузить</div>
<input type="file" class="fileInput" name="files" />
</div>
CSS
.poster {width:100%;float: left;display: inline-block;text-align: center;}
.poster input {display: none;}
.button {
display: inline-block;
border: 0;
padding: 10px 15px;
background: #f86;
color: #fff;
line-height: 22px;
border-radius: 3px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
JavaScript
var fileBox = document.querySelectorAll(".poster");
if(fileBox) {
for (var i = 0; i < fileBox.length; i++) {
fileBox[i].querySelector(".fileButton").onclick = function(e) {
fileBox[i].querySelector(".fileInput").click();
}
}
}