0

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>
0

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>

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.