+ Start a Discussion
Vigneshwaran LoganathanVigneshwaran Loganathan 

apex:inputFile can't be used in conjunction with an action component

Hello,

I have a VisualForce page from which I'm loading some Data , Validating and Saving it to SF. While processing this i need to show Loading icon. I've tried this with the help of some forums but no luck. 
 
<apex:pageBlockSection id="pbs">
         <apex:pageBlockSectionItem >
            <apex:outputLabel value="Select Object"/>
         </apex:pageBlockSectionItem>  
       
         <apex:pageBlockSectionItem >
             <apex:selectList size="1" value="{!Objselected}" >
                <apex:selectOptions value="{!ObjList}"/>
             </apex:selectList>
         </apex:pageBlockSectionItem> 
         
         <apex:pageBlockSectionItem >
             <apex:outputLabel value="Select File"/>
         </apex:pageBlockSectionItem>
         
         <apex:pageBlockSectionItem >
               <apex:inputFile value="{!contentFile}" filename="{!nameFile}" />          
         </apex:pageBlockSectionItem>
                           
          <apex:pageBlockSectionItem ></apex:pageBlockSectionItem> 
          
         
          
          <apex:pageBlockSectionItem id="pbsi">
             <apex:actionRegion id="area51" renderRegionOnly="false">
             <apex:commandButton action="{!ReadFile}" value="Validate File" id="theButton" disabled="{!vbutton}" status="spinnerStatus" rerender="pbsi"  /> 
             <apex:commandButton action="{!SaveFile}" value="Save" id="sButton"  disabled="{!sbutton}" status="spinnerStatus" rerender="form" /> 
            </apex:actionRegion>    
              
          </apex:pageBlockSectionItem> 
</apex:pageBlockSection>

When I use rerender, parameters are not passed to controller. Is there a way to overcome this.? 

Thanks
Vignesh
Best Answer chosen by Vigneshwaran Loganathan
Akshay_DhimanAkshay_Dhiman
Hi Vignesh,

Below is a code for the same . I have used the standard controller (Account). Hope it helps you.

Visualforce Code :
<apex:page standardController="Account">
 <style>
   #spinner{
       display: none;
       width:200px;
       height: 50px;
       position: fixed;
       top: 50%;
       left: 50%;
       text-align:center;
       padding:10px;
       font:normal 16px Tahoma, Geneva, sans-serif;
       margin-left: -100px;
       margin-top: -100px;
       z-index:2;
       overflow: auto;
       border:1px solid #CCC;
       background-color:white;
       z-index:100;
       padding:5px;
       line-height:10px;
    }
    #opaque {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: none;
        background-color: gray;
        filter: alpha(opacity=30);
        opacity: 0.3;
        -moz-opacity:0.3;
        -khtml-opacity:0.3
    }
    * html #opaque {
        position: absolute;
    }
 </style>
 <apex:form >
 
   <apex:pageMessages id="msgs" />
   <apex:pageBlock mode="mainDetail" title="Create Account">
    
     <apex:pageBlockButtons >
       <apex:commandButton value="Save" action="{!save}" onclick="showSpinner()" />
       <apex:commandButton value="Cancel" action="{!cancel}" onclick="showSpinner()" />
     </apex:pageBlockButtons>
     
     
     
     <apex:pageBlockSection >
       <apex:inputField value="{!Account.Name}" />
       <apex:inputField value="{!Account.Type}" />
       <apex:inputField value="{!Account.Ownership}" />
       <apex:inputField value="{!Account.Industry}" />
      </apex:pageBlockSection>
     
   </apex:pageBlock>    
 </apex:form>
  <div id="opaque"/>
  <div id="spinner">
       <p align="center" style='{font-family:"Arial", Helvetica, sans-serif; font-size:10px;}'><apex:image value="/img/loading.gif"/>&nbsp;Please wait</p>
  </div>
  
  <script>
   function showSpinner()
   {
      document.getElementById('opaque').style.display='block';
      var popUp = document.getElementById('spinner');
     
      popUp.style.display = 'block';
   }
  </script>
</apex:page>

Feel free to adjust CSS as you like. Works in my developer org.

Screenshot :

User-added image


Regards,
Akshay

All Answers

Akshay_DhimanAkshay_Dhiman
Hi Vignesh,

Below is a code for the same . I have used the standard controller (Account). Hope it helps you.

Visualforce Code :
<apex:page standardController="Account">
 <style>
   #spinner{
       display: none;
       width:200px;
       height: 50px;
       position: fixed;
       top: 50%;
       left: 50%;
       text-align:center;
       padding:10px;
       font:normal 16px Tahoma, Geneva, sans-serif;
       margin-left: -100px;
       margin-top: -100px;
       z-index:2;
       overflow: auto;
       border:1px solid #CCC;
       background-color:white;
       z-index:100;
       padding:5px;
       line-height:10px;
    }
    #opaque {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: none;
        background-color: gray;
        filter: alpha(opacity=30);
        opacity: 0.3;
        -moz-opacity:0.3;
        -khtml-opacity:0.3
    }
    * html #opaque {
        position: absolute;
    }
 </style>
 <apex:form >
 
   <apex:pageMessages id="msgs" />
   <apex:pageBlock mode="mainDetail" title="Create Account">
    
     <apex:pageBlockButtons >
       <apex:commandButton value="Save" action="{!save}" onclick="showSpinner()" />
       <apex:commandButton value="Cancel" action="{!cancel}" onclick="showSpinner()" />
     </apex:pageBlockButtons>
     
     
     
     <apex:pageBlockSection >
       <apex:inputField value="{!Account.Name}" />
       <apex:inputField value="{!Account.Type}" />
       <apex:inputField value="{!Account.Ownership}" />
       <apex:inputField value="{!Account.Industry}" />
      </apex:pageBlockSection>
     
   </apex:pageBlock>    
 </apex:form>
  <div id="opaque"/>
  <div id="spinner">
       <p align="center" style='{font-family:"Arial", Helvetica, sans-serif; font-size:10px;}'><apex:image value="/img/loading.gif"/>&nbsp;Please wait</p>
  </div>
  
  <script>
   function showSpinner()
   {
      document.getElementById('opaque').style.display='block';
      var popUp = document.getElementById('spinner');
     
      popUp.style.display = 'block';
   }
  </script>
</apex:page>

Feel free to adjust CSS as you like. Works in my developer org.

Screenshot :

User-added image


Regards,
Akshay
This was selected as the best answer
Vigneshwaran LoganathanVigneshwaran Loganathan
Thanks Akshay.!!
Akshay_DhimanAkshay_Dhiman
Thank you Vignesh for selecting my answer as best. It's my pleasure to help you.
srikanth attili 14srikanth attili 14
just to say you thanks..!! I have signed in... you are great..!!