muj fileupload button

by Petr Haluza

HTML

<form>
    <div class="input-file-container" data-title="Nahrát CV">
      <input type="file">
    </div>x
        <div class="input-file-container" data-title="Nahrát">
      <input type="file">
    </div>
  </form>

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap");

.input-file-container { width: 100%; position: relative;overflow:hidden}
.input-file-container input[type=file] {
  display: block; width:100%; height:6em; opacity: 0; position: absolute; top:-2em; z-index: 1; cursor: pointer}
.input-file-container span.file-button {
  display:inline-flex; justify-content: center; align-items: center;
	position: relative;	z-index: -1;
  height: 2em; background-color: #0054ff; color: #FFF; border-radius: 5px;
  padding: 0.75em 1.5em;cursor: pointer !important;}
.input-file-container span.file-name {
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;max-width: 100%; padding: 8px}

form {border:1px solid red; width:300px}

JavaScript

$(document).ready(function() {
    $('.input-file-container').each(function() {
        var inputElement = $(this).find('input');
				var inputText = $(this).attr('data-title');
        if (inputElement.length) {
            var button = $('<span class="file-button">' + inputText + '</span><span class="file-name">Soubor nevybrán</span>');
            inputElement.after(button);
        }
    });
		  $('input[type="file"]').on('change', function() {
        var fileName = $(this).val().split('\\').pop();
        $(this).siblings('span.file-name').text(fileName);
    });
});