Поле прикрепления файла

jquery.uploadbox.html

<div class="upload-file">
  <label class="upload-file__button">
    <input class="upload-file__element" type="file" name="">
    <span class="upload-file__icon">{{ svgIcon('plus') }}</span>
    <span class="upload-file__button-text">Добавить файл</span>
  </label>
  <div class="upload-file__file">
    <div class="upload-file__filename"></div>
    <div class="upload-file__clear">&times;</div>
  </div>
</div>

jquery.uploadbox.js

//==
//== Поле прикрепления файла
//== ======================================= ==//

jQuery.fn.uploadfile = function () {
    return this.each(function () {

        let $el = $(this);

        if (!!+$el.data('init')) return;

        $el.data('init', 1);

        let pickedFileName = '';
        let pickedFileSize = '';
        let fieldName;

        let $button   = $('.upload-file__button', $el);
        let $file     = $('.upload-file__file', $el);
        let $filename = $('.upload-file__filename', $el);
        let $clear    = $('.upload-file__clear', $el);

        $file.hide();

        function onChange(e) {
            fieldName = e.target.name;
            if (e.target.files.length && e.target.files[0].name) {
                const pickedFile = e.target.files[0];
                pickedFileName   = pickedFile.name;

                const nBytes     = pickedFile.size;
                const aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
                let nMultiple    = 0, nApprox = nBytes / 1024;
                for (; nApprox > 1; nApprox /= 1024, nMultiple++) {
                    pickedFileSize = nApprox.toFixed(1) + ' ' + aMultiples[nMultiple];
                }

                $button.hide();
                $file.show();
                $filename.html(pickedFileName + ' <small>(' + pickedFileSize + ')</small>');
            }
        }

        $el.find('input[type="file"]').on('change', onChange);

        $clear.on('click', function () {
            $el.find('input[type="file"]').remove();
            const $newField = $('<input>', {
                type : 'file',
                class: 'upload-file__element',
                name : fieldName,
            });
            $newField.on('change', onChange);
            $newField.appendTo($button);
            $button.show();
            $file.hide();
        });
    });
};

jquery.uploadbox.scss

/*==
 *== Upload file
 *== ======================================= ==*/

.upload-file {
  position: relative;

  &__element {
    position: absolute;
    left: -99999px;
  }

  &__button {
    overflow: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  &__icon {
    @include size(rem(20px));
    border-radius: 100%;
    background: $color-accent;
    flex-shrink: 0;
    color: #fff;
    display: flex;

    svg {
      @include size(50%);
      display: block;
      margin: auto;
    }
  }

  &__button-text {
    @include font(14px, 20px);
    color: $color-accent;
    padding-left: rem(10px);
  }

  &__file {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  &__filename {
    @include font(13px, 16px);
    color: $color-muted;
  }

  &__clear {
    @include font(16px, 10px);
    @include size(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: $color-main;

    &:hover {
      color: $color-accent;
    }
  }
}