nice field file

src/_blocks_library.html

@@ -371,14 +371,14 @@
                 <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
               </div>
             </label>
-            <label class="field-file">
+            <div class="field-file">
               <div class="field-file__name">Название поля</div>
-              <div class="field-file__input-wrap">
-                <input class="field-file__input" type="file">
-                <div class="field-file__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
-              </div>
-            </label>
-
+              <label class="field-file__input-wrap">
+                <input class="field-file__input" type="file" data-multiple-caption="файлов выбрано: {count}" multiple>
+                <div class="field-file__name-text" data-button-text="Выбрать файл">Файлы не выбраны</div>
+                <div class="field-file__help-text">Работа этого стилизованного поля требует Javascript-а.</div>
+              </label>
+            </div>
             <div class="field-actions">
               <button class="btn">Отправить</button>
             </div>

src/js/script.js

+
+'use strict';
+
+
+/*
+  Форма: работа стилизованного input[type="file"]
+  Автор: Osvaldas Valutis, www.osvaldas.info
+  Available for use under the MIT License
+*/
+
+;( function ( document, window, index )
+{
+  var inputs = document.querySelectorAll( '.field-file__input' );
+  Array.prototype.forEach.call( inputs, function( input )
+  {
+    var label  = input.nextElementSibling,
+        labelVal = label.innerHTML;
+
+    input.addEventListener( 'change', function( e ) {
+      var fileName = '';
+      if( this.files && this.files.length > 1 ) {
+        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+      }
+      else {
+        fileName = e.target.value.split( '\\' ).pop();
+      }
+
+      if( fileName ) {
+        label.innerHTML = fileName;
+      }
+      else {
+        label.innerHTML = labelVal;
+      }
+    });
+  });
+}( document, window, 0 ));
+
+
+
 // $(document).ready(function() {
 //   alert('fuck jQuery');
 // });

src/less/blocks/field-file.less

@@ -8,10 +8,53 @@
     margin-bottom: round(@line-height / 4, 2);
   }
 
-  &__input-wrap {}
+  &__input-wrap {
+    display: block;
+    position: relative;
+  }
 
   &__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+  }
+
+  &__name-text {
+    position: relative;
+    background-color: #fff;
+    border: 1px solid @border-color;
+    border-radius: @border-radius;
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    height: 2.125em; // 16 × 2.125 = 34
+    line-height: @line-height;
+    padding-right: @field-padding-horizontal;
     margin-bottom: round(@line-height / 3, 2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+
+    &:before {
+      content: attr(data-button-text);
+      display: inline-block;
+      vertical-align: middle;
+      background-color: @gray-lighter;
+      border: 1px solid @border-color;
+      margin-right: @field-padding-horizontal;
+      height: 2.125em;
+      line-height: @line-height;
+      padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
+      transform: translateX(-1px) translateY(-1px);
+      border-top-left-radius: @border-radius;
+      border-bottom-left-radius: @border-radius;
+    }
+
+    .field-file__input:focus ~ & {
+      .focus();
+    }
   }
 
   &__help-text {