Upload field

Styling & Customizing File Inputs the Smart Way

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;

    + label {
        font-size: $fontSizeBody;
        line-height: $lineHeightBody;
        color: white;
        display: inline-block;
        cursor: pointer;
    }

    &:focus {
        + label {
            outline: 1px dotted $cBlack;
            outline: -webkit-focus-ring-color auto 5px;
        }
    }
}

/* style 6 */
.inputfile-6 {
    + label {
        color: $cBlue;
        border: 1px solid $cGray;
        padding: 0;

        strong {
            padding: 7px 15px;
            font-weight: 300;
            height: 100%;
            color: $cFont;
            display: inline-block;
            background-color:$cBlueLight;

            @media screen and (max-width: 576px) {
                display: block;
            }
        }

        span {
            padding: 7px 15px;
            font-weight: 300;
            min-width: 150px;
            max-width: 250px;
            min-height: 2em;
            display: inline-block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            vertical-align: top;

            svg path {
                fill: $cBlue;
            }
        }

        &:hover {
            border-color: $cBlack;

            strong {
                background-color:$cBlue;
                color: $cWhite;
            }

            svg path {
                fill: $cWhite;
            }
        }
    }

    &:focus,
    &.has-focus {
        + label {
            border-color: $cBlack;

            strong {
                background-color:$cBlue;
                color: $cWhite;
            }
        }
        svg path {
            fill: $cWhite;
        }
    }
} 

JavaScript:

/*************************************************************
 *************  Custom File Upload Button  ****************
 *************************************************************/

function fileUploadButton() {

    $('.inputfile').each(function () {
        let $input = $(this),
            $label = $input.next('label'),
            labelVal = $label.html();

        $input.on('change', function (e) {
            let fileName = '';

            if (this.files && this.files.length > 1) {
                fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
            } else if (e.target.value) {
                fileName = e.target.value.split('\\').pop();
            }

            if (fileName) {
                $label.find('span').html(fileName);
            } else {
                $label.html(labelVal);
            }
        });

        // Firefox bug fix
        $input
            .on('focus', function () {
                $input.addClass('has-focus');
            })
            .on('blur', function () {
                $input.removeClass('has-focus');
            });
    });

}