title: Get absolute file name of the file selected in HTML input instead of path
body: <p>I'm using a label tag for file input:</p>
  
  <pre><code>&lt;label for="file" style="cursor: pointer"&gt;
      &lt;img src="plus.png"&gt;&lt;span id="file-text"&gt;Select a file&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>Once the user selects a file, I want the text of the label to change to the file name of the selected file, but not the path.</p>
  
  <p><code>&lt;input type="file" id="file" style="display: none" onchange="document.getElementById('file-text').innerHTML = this.value"/&gt;</code></p>
  
  <p>Google Chrome is returning</p>
  
  <blockquote>
    <p>C:\fakepath\filename.jpg</p>
  </blockquote>
  
  <p>Microsoft Edge is returning the entire correct path of the file on the local file system.</p>
  
  <p>I tried the split function:</p>
  
  <pre><code> onchange="var path = this.value.split('\'); document.getElementById('file-text').innerHTML = 'path[path.length-1]'"
  </code></pre>
  
  <p>But now it is not returning anything. The text doesn't change anymore. Would it be possible to accomplish this in inline script or I'd have to use a separate function?</p>