[SalesForce] How to refresh only output panel when input file is using in visualforce page?

How to refresh only output panel when apex:inputfile is using in visualforce page?i am using input file in a form and in the form i am using command button to rerender the output panel.but its showing error.can any body help me on this….

Best Answer

To refresh only output panel when apex:inputfile is using in visualforce page done by using apex:actionRegion tag. I hope that, it's works perfectly. One of the sample code as follows for your reference

<apex:form enctype="multipart/form-data" id="frmId">

            <apex:pageMessages />
            <apex:pageBlock title="Upload a File" mode="edit">
                <apex:pageBlockButtons location="top">
                    <apex:actionRegion >
                        <apex:commandButton action="{!upload}" value="Save"/>
                    </apex:actionRegion>
                </apex:pageBlockButtons>

                <apex:pageBlockSection showHeader="false" columns="1" id="block1">
                <apex:pageBlockSection columns="2" id="block13">
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel value="Type"/>
                        <apex:actionRegion >
                            <apex:selectList size="1" multiselect="false" value="{!banner.Type__c}">
                                <apex:selectOptions value="{!TypeLists}"/>
                                <apex:actionSupport reRender="frmId" event="onchange" status="LoadingStatus"/>
                            </apex:selectList>
                        </apex:actionRegion>
                    </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem >
                        <apex:outputPanel id="pannelImgeId">
                            <apex:outputLabel value="File" id="imageblockId" rendered="{!banner.Type__c != 'Gallery'}"/>
                            <apex:inputFile value="{!image.body}" filename="{!image.name}" rendered="{!banner.Type__c != 'Gallery'}"/>
                        </apex:outputPanel>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection>
                <apex:outputPanel id="block11">
                    <apex:pageBlockSection showHeader="false" columns="2"  rendered="{!banner.Type__c == 'Banner'}">
                        <apex:pageBlockSectionItem >
                            <apex:outputLabel value="States"/>
                            <apex:selectList size="1" multiselect="false" value="{!stateNameValu}" id="stateNameId">
                                <apex:selectOptions value="{!StatesName}"/>
                            </apex:selectList>
                        </apex:pageBlockSectionItem>
                        <apex:outputPanel >
                            <apex:pageBlockSectionItem >
                                <apex:outputLabel value="Community VF Page" style="margin-right: 5%;"/>
                                <apex:selectList size="1" multiselect="false" value="{!banner.Community_VF_Page_Name__c}">
                                    <apex:selectOptions value="{!VFLists}"/>
                                </apex:selectList>
                            </apex:pageBlockSectionItem>
                        </apex:outputPanel>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection showHeader="false" columns="2"  rendered="{!banner.Type__c == 'State Leader Board'}">
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel value="States"/>
                        <apex:selectList size="1" multiselect="false" value="{!stateNameValu}" id="stateLeaderId">
                            <apex:selectOptions value="{!StatesName}"/>
                        </apex:selectList>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection>

                <apex:pageBlockSection showHeader="false" columns="2" id="block12" rendered="{!banner.Type__c == 'Gallery'}">
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel value="Select Gallery Name"/>
                        <apex:actionRegion >
                            <apex:selectList size="1" multiselect="false" value="{!galleryNameSelect}" id="SelectId">
                                <apex:selectOptions value="{!OldNames}"/>
                                <script> var SelectId = '{!$Component.SelectId}';</script>
                                <apex:actionSupport reRender="frmId" event="onchange" action="{!oldImages}" status="LoadingStatus"/>
                            </apex:selectList>
                        </apex:actionRegion>
                    </apex:pageBlockSectionItem>
                    <apex:outputPanel id="panelId">
                        <apex:pageBlockSectionItem rendered="{!galleryNameSelect == 'Custom'}" >
                            <apex:outputLabel value="Gallery Name" style="margin-right: 5%;"/>
                            <apex:inputText value="{!galleryName}" id="displayBlockId">
                                <script> var displayBlockId = '{!$Component.displayBlockId}';</script>
                            </apex:inputText>
                        </apex:pageBlockSectionItem>                        
                    </apex:outputPanel>
                    <apex:actionFunction name="bulkAttach" action="{!uploadAttachmentController}" reRender="customIdImg" oncomplete="checkForUploadsId('{!parentId}');" status="LoadingStatus">
                    </apex:actionFunction>
                    <br/><br/>                    



                </apex:pageBlockSection>
                </apex:outputPanel>
                </apex:pageBlockSection>
            </apex:pageBlock>

            <apex:pageBlock rendered="{!banner.Type__c == 'Gallery'}" title="Add Files"><br/>
                <apex:pageBlockSection id="attachId">
                    <table cellpadding="0" cellspacing="0" class="uploadTable">
                        <tr>
                            <td><input type="file" multiple="true" id="filesInput" name="file"  style="width: 495px;"/></td>
                            <td class="buttonTD">
                                <input id="uploadButton" type="button" title="Upload" class="btn" value=" Upload " onclick="prepareFileUploads()"/>
                                <input id="clear" type="button" title="Clear" class="btn" value=" Clear " onclick="clearFiles()"/>
                            </td>
                        </tr>
                    </table>
                </apex:pageBlockSection><br/>
                <table class="UploadedFileTableCls" width="100%" style = "text-align:left; border: 1px solid #dededd; clear:both;display: none;">
                <!--<table class="UploadedFileTableCls" id="tableId" style="display: none;">-->
                    <thead>
                        <th width="1000px;">File Name</th>
                        <th width="1000px;">Action</th>
                    </thead>
                </table><br/>

                <div class="UploadedFileTableCls">
                    <div class="uploadBox">
                    </div>
                </div>   
            </apex:pageBlock>
            <apex:outputPanel id="oldImgId">
                <apex:outputPanel rendered="{!imageList.size !=0 }">
                    <apex:pageBlock rendered="{!banner.Type__c == 'Gallery'}"  title="Existing Files">
                        <apex:pageBlockTable value="{!imageList}" var="imgVal">
                            <apex:column headerValue="File Name" value="{!imgVal.Name}" style="width: 30%;"/>
                            <apex:column headerValue="Images" style="width: 20%;">
                                <img src="/servlet/servlet.FileDownload?file={!imgVal.Id}" style="width:125px;height:120px;"/>
                            </apex:column>
                            <apex:column headerValue="Action">
                                <a href="#" onclick="deleteAttachmentOld('{!imgVal.Id}')">Remove</a>
                                <!--<apex:commandLink hreflang="#" value="Remove" reRender="none" onclick="deleteAttachmentOld('{!imgVal.Id}')"/>-->
                            </apex:column>
                        </apex:pageBlockTable>
                    </apex:pageBlock>
                </apex:outputPanel>
            </apex:outputPanel>

            <apex:actionStatus id="LoadingStatus" onstart="$('.modall').show();" onstop="$('.modall').hide();"/>
            <apex:actionFunction status="LoadingStatus" name="deleteAttachments" action="{!deleteAttachRec}" reRender="attachId">
                <apex:param name="idss" assignTo="{!idAttach}" value=""/>
            </apex:actionFunction>
            <apex:actionFunction status="LoadingStatus" name="deleteAttachmentOld" action="{!deleteAttachRec}" reRender="oldImgId">
                <apex:param name="idss" assignTo="{!idAttach}" value=""/>
            </apex:actionFunction>
        </apex:form>
Related Topic