Apex:inputfile customize

Question

Im trying to display the uploaded image name for the apex:inputfile. I think i need to modify my controller to add the display action,but dont know how to do it,any ideas?

<apex:page >
   <apex:form id="theForm">
      <apex:slds />
      <apex:pageBlock >
         <apex:pageBlockSection >
            <div class="slds-form-element">
               <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">
                        <apex:inputFile styleClass="slds-file-selector__input slds-assistive-text" accept="image/png" id="fileUploadInput01" value="foo" />
                        <apex:outputLabel styleClass="slds-file-selector__body" for="fileUploadInput01">
                           <span class="slds-file-selector__button slds-button slds-button_neutral">
                              <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
                                 <use xmlns:xlink="http://www.w3.org/1999/xlink" 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>
                        </apex:outputLabel>
                     </div>
                  </div>
               </div>
            </div>
            <apex:commandButton value="Save" action="{!save}"/>
         </apex:pageBlockSection>
      </apex:pageBlock>
   </apex:form>
</apex:page>

Answer 1

To get the filename displayed when the file is uploaded, you will have to write javascript code and call that method from onchange event of your <apex:inputFile> component.

This is the javascript code that should work for you

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

Now call this javascript method from onchange event from input file

<apex:inputFile onchange="handleFile(this)" styleClass="slds-file-selector__input slds-assistive-text" accept="image/png" id="fileUploadInput01" value="foo"  /> 

Set the id of your span i.e. wherever you want to display the file name, and use that same id in javascript method as well. I used span's id as "fileName" in this example and same is referred in javascript as well.

<span id="fileName" class="slds-file-selector__text slds-medium-show">or Drop Files</span>

Here is how the entire code would look like

<apex:page >
   <apex:form id="theForm">
      <script>
      function handleFile(file) {
            var fullPath = document.getElementById(file.id).value;
            var split = fullPath.split(/(\\|\/)/g).pop();
            document.getElementById("fileName").innerHTML = split;
      }
      </script>
      <apex:slds />
      <apex:pageBlock >
         <apex:pageBlockSection >
            <div class="slds-form-element">
               <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">
                        <apex:inputFile styleClass="slds-file-selector__input slds-assistive-text" accept="image/png" id="fileUploadInput01" value="foo" onchange="handleFile(this)"/>
                        <apex:outputLabel styleClass="slds-file-selector__body" for="fileUploadInput01">
                           <span class="slds-file-selector__button slds-button slds-button_neutral">
                              <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
                                 <use xmlns:xlink="http://www.w3.org/1999/xlink" 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">or Drop Files</span>
                        </apex:outputLabel>
                     </div>
                  </div>
               </div>
            </div>
            <apex:commandButton value="Save" action="{!save}"/>
         </apex:pageBlockSection>
      </apex:pageBlock>
   </apex:form>
</apex:page>