Not showing file name in SLDS File Selector

Question

I am using SLDS on VF page and I am using File selector input and when I upload file , It does not show me the selected filename next to it.

Here is my code.

<div class="slds-form-element">
<div class="slds-form-element__control">
  <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
          <div class="slds-form-element__control">
            <div class="slds-file-selector slds-file-selector--files">
              <div class="slds-file-selector__dropzone">
                <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id" />
                <label class="slds-file-selector__body" for="file-upload-input-01">
                  <span class="slds-file-selector__button slds-button slds-button--neutral">
                    <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
                    </svg>Upload Files</span>
                  <span class="slds-file-selector__text slds-medium-show">or Drop Files</span>
                </label>
              </div>
            </div>
          </div>
    </div>
</div>

Answer 1

By using FileReader object You want to get the fileName of selected file refer this link for more details and set inside <span id="fileName" class="slds-file-selector__text slds-medium-show"></span>

<div class="slds-form-element">
<div class="slds-form-element__control">
  <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
          <div class="slds-form-element__control">
            <div class="slds-file-selector slds-file-selector--files">
              <div class="slds-file-selector__dropzone">
                <input  class="slds-file-selector__input slds-assistive-text" type="file" onchange="handleFile(this)" id="file-upload-input-01" aria-describedby="file-selector-id"/>
                <label class="slds-file-selector__body" for="file-upload-input-01">
                  <span class="slds-file-selector__button slds-button slds-button--neutral">
                    <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
                    </svg>Upload Files</span>
                  <span id="fileName" class="slds-file-selector__text slds-medium-show"></span>
                </label>
              </div>
            </div>
          </div>
    </div>
</div>      

   //sample code you 
    function handleFile(file) {
        var reader  = new FileReader();
        reader.file = f;
        var fileobj = f;
        document.getElementById("fileName").innerHTML = fileobj.name;
    }

Answer 2

Since the code in the best answer is just sample code here is the working code to work with file reader:

function handleFile(evt) {
    var f = evt.target.files[0];

    if (f) {
      var r = new FileReader();
      r.onload = function(e) {
          document.getElementById("fileName").innerHTML = f.name;
      }
      r.readAsText(f);
    } else {
        alert("Failed to load file name");
    }
}

Answer 3

Like This get the id file-upload-input-01 and split it split(/(\\|\/)/g).pop() then pass the name to particular div id fileName to display text.

function handleFile() {
    var fullPath = document.getElementById('file-upload-input-01').value;
    var split = fullPath.split(/(\\|\/)/g).pop();
    document.getElementById("fileName").innerHTML = split;
}