JSFiddle - React, Tailwind, and code Playground
HTML
<label class="file_add">
<input type="file" accept="image/*,text/*" name="files" multiple>
<span class="input_file">Выбрать файлы</span><span class="reader_file"></span>
</label>
CSS
label {
cursor: pointer;
}
input[type="file"] {
margin: 0;
padding: 0;
width: 0;
height: 0;
border: 0;
overflow: hidden;
position: absolute;
}
JavaScript
$(document).on('change','input[type="file"]',function()
{
var file_add = $(this).parents('.file_add');
var reader_file = $(file_add).find('.reader_file');
var file_list_ = $(this).prop('files');
$(reader_file).html('');
for(var nf=0; nf<file_list_.length; nf++)
{
$(reader_file).append(' | '+file_list_[nf].name);
}
});