function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shravan Kumar 71Shravan Kumar 71 

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

<apex:page standardController="Order" extensions="orderPageLayoutController">    
    <apex:form id="fm">
<apex:pageBlock id="pbsk">	
            <apex:pageBlockSection title="Order Terms and Client POC Details" columns="2">
                <apex:pageblocksectionItem >
                    <apex:outputlabel value="Invoice Contact" />
                    <apex:actionRegion >
                        <apex:inputField value="{!Order.Invoice_Contact__c}" required="true">
                            <apex:actionSupport event="onchange" action="{!autoFillData}" reRender="conEmail,conPhone"/>   
                        </apex:inputField>
                    </apex:actionRegion>
                </apex:pageblocksectionItem>
                <apex:inputField value="{!Order.Invoice_Email__c}" id="conEmail"/>
                <apex:inputField value="{!Order.Invoice_Phone__c}" id="conPhone"/>
                <apex:repeat value="{!$ObjectType.Order.FieldSets.Contact_Name_and_Payment_Terms}" var="f">                             
                    <apex:inputField value="{!Order[f]}"  required="{!OR(f.required, f.dbrequired)}" />
                </apex:repeat>
            </apex:pageBlockSection>   
</apex:pageBlock>
</apex:form>			
            
    <!-- File Uplaod Section -->
    <apex:form enctype="multipart/form-data">
        <apex:pageBlock id="thePageBlock" >
            <apex:pageBlockSection title="Upload Related Files" columns="1">
                <apex:pageMessages />
            </apex:pageBlockSection>
            <apex:pageBlockSection showHeader="false" columns="1" id="block1">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="File Name" for="fileName"/>
                    <apex:inputField value="{!theConVer.title}" styleClass="slds-input slds-size_1-of-2"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="File" for="file"/>
                    <apex:inputFile value="{!theConVer.versionData}" fileName="{!fileName}" id="file" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Document Type"/>
                    <apex:inputField value="{!theConVer.Document_Type__c}" styleClass="slds-listbox slds-input slds-size_1-of-2" required="true" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            <input id="uploadButton" type="button" value="Upload file" name="uploadFile" onclick="uploadFileToTemp()" />			   
        </apex:pageBlock>
        <apex:actionFunction action="{!uploadFile}" name="uploadFile" reRender=""/>
    </apex:form> 
    
	<script type="text/javascript">
    function uploadFileToTemp(){
        document.getElementById ('uploadButton').disabled = true;
        uploadFile();    
    }
    </script>
	
</apex:page>

Hello,

Can anyone help me out to fix the rerender with apex:inputfile issue :

 
Shravan Kumar 71Shravan Kumar 71
I have two section on the page : One where user enter details and the other where user upload the file. So when user click on Upload File button, the file should get saved to a custom object (this is working as expected), however after clicking on the button the entire page gets refreshed so the details entered in the above section needs to be refilled. The requirement is to refresh only the Upload File section when Upload File button is clicked. 
Devi ChandrikaDevi Chandrika (Salesforce Developers) 
Hi shravan ,
For this you can use command button and in the reRender attribute of command button give id of the pageblock you want to refresh.
Try this one 
<apex:commandButton value="Upload file" action="{!uploadFileToTemp}" reRender="thePageBlock"/>

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_commandButton.htm

Hope this helps you
If this helps kindly mark it as solved so that it may help others in future.

Thanks and Regards
Shravan Kumar 71Shravan Kumar 71
I have already tried that, below is the error message that I get :

User-added image
Devi ChandrikaDevi Chandrika (Salesforce Developers) 
Try using only one form by wrapping both the pageblocks into same form.I tried sample code in my org.It is working fine for me.It's a best practice to use only one <apex:form> tag in a page or custom component.

Hope this helps you
If this helps kindly mark it as solved so that it may help others in future.

Thanks and Regards
 
Shravan Kumar 71Shravan Kumar 71
Nope that's didn't help either. Here is the revised code : 
<apex:page standardController="Order" extensions="orderPageLayoutController">
<apex:page>
    <apex:form id="fm">
        <c:LoadingScreen />
        <apex:outputPanel id="error"><apex:pageMessages id="showmsg"></apex:pageMessages></apex:outputPanel>
        
		<apex:pageBlock id="pbsk">            
            <apex:pageBlockSection title="Order Terms and Client POC Details" columns="2">
                <apex:pageblocksectionItem >
                    <apex:outputlabel value="Invoice Contact" />
                    <apex:actionRegion >
                        <apex:inputField value="{!Order.Invoice_Contact__c}" required="true">
                            <apex:actionSupport event="onchange" action="{!autoFillData}" reRender="conEmail,conPhone"/>   
                        </apex:inputField>
                    </apex:actionRegion>
                </apex:pageblocksectionItem>
                <apex:inputField value="{!Order.Invoice_Email__c}" id="conEmail"/>
                <apex:inputField value="{!Order.Invoice_Phone__c}" id="conPhone"/>
                <apex:repeat value="{!$ObjectType.Order.FieldSets.Contact_Name_and_Payment_Terms}" var="f">                             
                    <apex:inputField value="{!Order[f]}"  required="{!OR(f.required, f.dbrequired)}" />
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
		
        <!-- File Uplaod Section -->
        <apex:pageBlock id="thePageBlock" >
            <apex:pageBlockSection title="Upload Related Files" columns="1">
                <apex:pageMessages />
            </apex:pageBlockSection>
            <apex:pageBlockSection showHeader="false" columns="1" id="block1">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="File Name" for="fileName"/>
                    <apex:inputField value="{!theConVer.title}" styleClass="slds-input slds-size_1-of-2"/>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="File" for="file"/>
                    <apex:inputFile value="{!theConVer.versionData}" fileName="{!fileName}" id="file" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Document Type"/>
                    <apex:inputField value="{!theConVer.Document_Type__c}" styleClass="slds-listbox slds-input slds-size_1-of-2" required="true" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            <apex:pageBlockSection > 
                <div align="center">                    
                    <apex:commandButton action="{!UploadFile}" value="Upload File" reRender="pbsk" styleClass="slds-button slds-button_brand"/>                    
                </div>
            </apex:pageBlockSection> 			   
        </apex:pageBlock>
		
    </apex:form>
</apex:page>

 
Foram Rana RForam Rana R
Hi Shravan,

I hope you are doing well .....!!
Then go through the below sample code.
<apex:page controller="CheckController">
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <style>
                * {
                box-sizing: border-box;
                }
                
                /* Create two equal columns that floats next to each other */
                .column {
                float: left;
                width: 50%;
                padding: 10px;
                height: 300px; /* Should be removed. Only for demonstration */
                }
                
                /* Clear floats after the columns */
                .row:after {
                content: "";
                display: table;
                clear: both;
                }
            </style>
            <script>
            
            function uploadFile() {
            	alert('Call Server method');    
                UploadFileSaveJS();
            }
            </script>
        </head>
        <body>
            
            <h2>Two Equal Columns</h2>
            <apex:form>
                <apex:actionFunction action="{!UploadFileSave}" name="UploadFileSaveJS" reRender="uploadfilepanel"/>
                <div class="row">
                    <div class="column" style="background-color:#aaa;">
                        <h2>Column 1</h2>
                        First name:<br/>
                        <input type="text" name="firstname" value="" />
                        <br />
                        Last name:<br/>
                        <input type="text" name="lastname" value="" />
                        <br/><br/>
                        <input type="submit" value="Submit" />
                    </div>
                    <apex:outputPanel id="uploadfilepanel">
                        <div class="column" style="background-color:#bbb;">
                            <h2>Column 2</h2>
                            <p>Some text..</p>
                            <input type="file" id="files"/>
                            <button class="rcorners btn btn-info btn-lg" type="button" data-toggle="modal" onclick="uploadFile();"  data-target="#myModal1" >Upload</button>
                        </div>                        
                    </apex:outputPanel>
                    
                </div>
            </apex:form>            
            
        </body>
    </html>
</apex:page>
 
public class CheckController {
	
    public CheckController(){
        
    }
    public void UploadFileSave(){
    	System.debug('@@@ File Save successfully....!!!!');
    }
}



Hope this helps you.
Let me know your review.
If this helps kindly mark it as solved so that it may help others in the future.

Thanks & Regards,
Foram Rana