1

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>

enter image description here

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;
    }
1

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");
    }
}
1

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.