title: get selected file name with javascript
body: <p>I want to show selected file name in file input by JavaScript but not sure how to</p>
  
  <p><a href="https://i.stack.imgur.com/G1DRz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G1DRz.png" alt="one"></a></p>
  
  <p>I want change <code>No file selected</code> with file name</p>
  
  <h1>Code</h1>
  
  <pre><code>&lt;div class="upload-info mt-2"&gt;&lt;strong&gt;Attachment&lt;/strong&gt; &lt;span&gt;Max. file size: 3MB&lt;/span&gt;&lt;/div&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  
  &lt;label class="upload-btn"&gt;
    {{Form::file('attachment', array('id' =&gt; 'attachment'))}}
    &lt;i class="fa fa-upload"&gt;&lt;/i&gt; Browse
  &lt;/label&gt;
  &lt;span class="fake-input"&gt;No file selected&lt;/span&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
          function readURL(input) {
              if (input.files &amp;&amp; input.files[0]) {
                  var reader = new FileReader();
  
                  reader.onload = function (e) {
                      $('#fake-input').attr('src', e.target.result);
                  }
  
                  reader.readAsDataURL(input.files[0]);
              }
          }
  
          $("#attachment").change(function(){
              readURL(this);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>what should i change in my code?</p>
  
  <h1>Update</h1>
  
  <pre><code>&lt;label class="upload-btn"&gt;
    {{Form::file('attachment', array('id' =&gt; 'attachment'))}}
    &lt;i class="fa fa-upload"&gt;&lt;/i&gt; Browse
  &lt;/label&gt;
  &lt;span class="fake-input"&gt;No file selectedspan&lt;/span&gt;
  &lt;span id="fake-input"&gt;&lt;/span&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
          function readURL(input) {
              if (input.files &amp;&amp; input.files[0]) {
                  var reader = new FileReader();
  
                  reader.onload = function (e) {
                      $('.fake-input').hide();
                      $('#fake-input').append(e.target.result).show();
                  }
  
                  reader.readAsDataURL(input.files[0]);
              }
          }
  
          $("#attachment").change(function(){
              readURL(this);
              $('#fake-input').hide();
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <h1>error</h1>
  
  <p>getting <code>data:image/jpeg;base64,.............</code> instead of file name</p>