Customized file input

file-input.js

/**
 * File input
 */
$(function () {
    "use strict";

    var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;

    $('.form-control-upload').each(function () {
        var input = $('.form-control-upload__element', this);
        var label = $('.form-control-upload__label', this);

        input.change(function () {
            var file_name;

            if (file_api && input[0].files[0]) {
                file_name = input[0].files[0].name;
            }

            if (!file_name.length) {
                return;
            }

            label.text(file_name);
        }).change();
    });
});

file-input.twig

<label for="join-form-upload" class="form-control-upload">
    <input class="form-control-upload__element" type="file" name="photo" id="join-form-upload">
    <span class="form-control-upload__icon"></span>
    <span class="form-control-upload__label">Загрузить фотографию</span>
</label>