JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <fieldset>
        <input type="file" />
    </fieldset>
</form>

JavaScript

// This is for change view of file input button
$('input[type=file]').each(function () {
    // Hide original button and create newset, good looking for all browsers
    // I must set type attribute for button,
    // because lot of browsers using button without type as submit and send form
    $(this).wrap('<div class="button-file ' + $(this).attr('class') + '" />').hide().parent('.button-file').append('<button type="button">Browse and select file</button>');
});

$('input[type=file]').parent('.button-file').on('click', 'button', function (event) {
    event.preventDefault();

    // This click(); method is from JavaScript, not jQuery
    $(this).parent('.button-file').children('input[type=file]').click();
}).on('change', 'input[type=file]', function () {
    // Remove ins tag if change selected file
    $(this).parent('.button-file').children('ins').remove();

    // Insert file name between ins tag
    $(this).parent('.button-file').children('button').after('<ins>' + $(this).val().replace(/^.*[\\\/]/, '') + '</ins>');
});

$('input[type=file]').on('change', function () {
        code = '<fieldset>' + $(this).parents('fieldset').html().replace('Browse and select file', 'Add one more file') + '</fieldset>';

        $(this).parents('fieldset').after(code);
});