title: Remove placehoder input file name when click on "X" button, and display default input field text
body: <p>When I click on <a href="https://i.stack.imgur.com/jShnk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jShnk.png" alt="enter image description here"></a> upload icon , I can choose file for attachment, and then I get <a href="https://i.stack.imgur.com/L8k4s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L8k4s.png" alt="enter image description here"></a> with "X" remove attachment button (@extend .icon-cross; in sass). When I click on X remove attachment button, I want to achieve that return default input filed text (Upload field) instead of attached file name (in this case for example asdf.txt)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function File(sandbox, hub) {
  
    'use strict';
  
  
    let $file = $('input.input-file-hidden');
  
    /**
     * onChange event handler
     * @function onChange
     * @private
     */
    function onChange() {
      let $placeholder = $('span.input-file-placeholder', $(this).closest('div.input-file'));
      $placeholder.text(
        $(this)[0].files[0].name);
      $placeholder.parent().addClass('filled');
    }
  
  
    return {
      /**
       * initialize File
       */
      init() {
        $file.on('change', onChange);
        hub.on('inputfile:init', components =&gt; {
          components.forEach(function(component) {
            $(component).find('input.input-file-hidden').on('change', onChange);
          });
        });
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&amp;.filled {
    .input-file-button .icon {
      position: relative;
      top: -4px;
      left: -2px;
      font-size: 15px;
      @extend .icon-cross;
      @include breakpoint(phone) {
        font-size: 24px;
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-xs-12 col-md-2 no-gutter-right"&gt;
    &lt;div class="form-elements-label"&gt;Normal&lt;/div&gt;
    &lt;div class="input-file input-file--with-icon"&gt;
      &lt;label class="text-hide" for="f405"&gt;Upload field&lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
      &lt;input class="input-file-hidden" type="file" required data-max-size="10485760" data-max-size-error-text="* File size is too large"&gt;
      &lt;input class="input-file-elem" type="text" id="f405"&gt;
      &lt;span class="input-file-placeholder"&gt;Upload field&lt;sup&gt;*&lt;/sup&gt;&lt;/span&gt;
      &lt;span class="input-file-bg"&gt;input background&lt;/span&gt;
      &lt;span class="input-file-button"&gt;&lt;span class="icon icon-download"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;div class="input-file-additional-info text-right"&gt;
        &lt;span class="additional-info-text"&gt;* JPG, PNG (max 10Mb)&lt;/span&gt;
        &lt;span class="error-text"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I was try so far, in JS add (with .val(' ') on click X,  I changed value from "file name, asdf.txt" to "No file chosen"
  as a title on hover over input field) but I need to change input field name to  default input field text "Upload field" :  </p>
  
  <pre><code>let $remove = $('.input-file input-file--with-icon.filled .icon-download');
  remove.on("click", function () {
          $placeholder.val('');
      });
  </code></pre>