<div class="m-form-upload jq_upload">
	<input type="file" name="file" id="frm-pc-form-file" class="m-form-upload__input jq_upload_file">
	<span class="m-form-upload__control a-button jq_upload_control"> Upload </span>
	<span class="m-form-upload__note">maximum size 2 MB</span>
	<span class="m-form-upload__path jq_upload_path" data-text="Selected file: "></span>
</div>

@import "atoms/button/index";

.m-form-upload {

    $self: &;

    position: relative;

    &__input {

        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 19;

        &:hover {

            outline: none;

        }

        &.focus-visible {

            &:focus {

                + #{$self}__control {

                    outline: 1px dotted color('black');
                    outline: auto 5px -webkit-focus-ring-color; // sass-lint:disable-line no-duplicate-properties no-vendor-prefixes

                }

            }

        }

    }

    &__control {

        margin-right: em(10px);

    }

    &__path {

        &:not(:empty) {

            display: block;
            margin-top: em(10px);

            &:before {

                content: attr(data-text);

            }

        }

    }
}

import $ from 'jquery';

export default class Upload {
	constructor() {
		$('.jq_upload').each((i, el) => {
			var $el = {
				'container': $(el),
				'file': $('.jq_upload_file', el),
				'control': $('.jq_upload_control', el),
				'path': $('.jq_upload_path', el)
			};

			$el.control
				.on('keydown', (e) => {
					if (e.keyCode === 13 || e.keyCode === 32) {
						$el.file.focus();
					}
				})
				.on('click', () => {
					$el.file.focus();

					return false;
				});

			$el.file.on('change', () => {
				var value = $el.file.val();

				var filename = value.substring(
					value.lastIndexOf('\\') + 1
				);

				$el.path.html(typeof filename !== 'undefined' ? filename : value);
			});
		});
	}
}

$(() => new Upload);