Cacher is the code snippet organizer for pro developers

initFileHandler() {
    const _this = this;

    this.$fileBlock.each(function (i, block) {
      const $block = $(block);
      const $input = $block.find('input');
      const $removeBtn = $block.find('.file-block__remove-btn');
      const $nameField = $block.find('.file-block__name-field');

      $input.on('change', function (e) {
        const $target = $(e.target);
        const fileName = e.target.files[0].name;

        if ($target.val()) {
          _this.$fileBlock.addClass(css.active);
          $nameField.text(fileName);
        }
      });

      $removeBtn.on('click', function () {
        $input.replaceWith($input.val('').clone(true));
        _this.$fileBlock.removeClass(css.active);
        $nameField.text('');
      });
    });
  }

.form-field.request__form-field.request__form-field_upload.file-block
	label.file-block__add-btn
		+i('local-printshop')
		span Прикрепить скан паспорта
		input(type='file' accept='image/*' name='passport_scan')
	button.file-block__remove-btn(type='button')
		+svg('remove')
		span Удалить файл
	.file-block__name-field

.file-block
   position: relative
   text-align: left
   color: #3198f0
   +f('ms300', 15, 15)
   +xs
      display: flex
      flex-direction: column-reverse
   &__add-btn
      display: inline-flex
      align-items: center
      flex: 0 1 auto
      cursor: pointer
      +trs
      +xs
         margin-bottom: 5px
      .is-active &
         opacity: 0
         pointer-events: none
      
      &:hover
         span
            border-bottom-color: transparent
         
      input
         display: none
      span
         margin-left: 10px
         border-bottom: 1px solid rgba(#3198f0, .6)
         transition: .3s ease-in-out
   
   &__remove-btn
      position: absolute
      left: 15px
      top: 50%
      right: 15px
      opacity: 0
      width: 122px
      overflow: hidden
      transform: translate(10px, -50%)
      display: flex
      align-items: center
      cursor: pointer
      pointer-events: none
      transition: .3s ease
      color: #3198f0
      +f('ms300', 15, 15)
      +xs
         top: auto
         bottom: 0
         left: 50%
         right: auto
      .is-active &
         opacity: 1
         transform: translate(0, -50%)
         pointer-events: auto
         +xs
            transform: translate(-50%, -50%)
      
      &:hover
         color: rgba(213, 29, 72, 1)
         svg
            fill: rgba(213, 29, 72, 1)
      svg
         flex-shrink: 0
         font-size: 15px
         margin-right: 11px
         fill: #3198f0
         +gpu
         +trs
   
   &__name-field
      position: absolute
      top: 50%
      right: 15px
      opacity: 0
      transform: translate(-10px, -50%)
      width: 220px
      height: 15px
      transition: .3s ease
      text-align: right
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      color: $color2
      font-size: 12px
      pointer-events: none
      +xs
         position: static
         width: 100%
         height: 25px
         text-align: center
         transform: none!important
      .is-active &
         opacity: 1
         transform: translate(0, -50%)
         pointer-events: auto