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

Question

I have actionFunction with rerender on it, It rerender the textarea field in the form. I have inputFile field. the problem is when I put them both together inside form I get this error apex inputFile can not be used in conjunction with an action component. When I put actionFunction outside the form the TextArea Field won't rerender. if I put inputFile outside the form it comes as null value. my code

<apex:outputPanel id="calPanel">
<apex:form >
    <apex:PageBlock>
        <apex:pageBlockSection title="Edit Email">
            <apex:panelGrid columns="2" cellpadding="5%" cellspacing="5%">


                <apex:outputLabel styleClass="labelText"></apex:outputLabel>
                <apex:inputTextarea id="idTextarea" value="{!allStringRecipients}" disabled="false" styleClass="wideTextArea"/>

                <apex:outputLabel styleClass="labelText">Use Template:</apex:outputLabel>
                <apex:selectList size="1" styleClass="templateSelect">
                    <apex:selectOptions value="{!templateOptions}" />
                </apex:selectList>

                <apex:outputLabel styleClass="labelText"></apex:outputLabel>
                <apex:CommandButton value="Insert Template" onclick="insertTemplate();" rerender="editor, idSubject"/>


        <apex:outputLabel styleClass="labelText">Attach File</apex:outputLabel>
        <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}"/>

            </apex:panelGrid>
        </apex:pageBlockSection>
        <apex:pageBlockButtons >
            <apex:CommandButton value="Send" action="{!send}"/>
        </apex:pageBlockButtons>
    </apex:PageBlock>
    <apex:actionFunction name="CallApexMethod" action="{!myActionInController}" reRender="idTextarea"/>
</apex:form>
   </apex:outputPanel>

Answer 1

You can solve it using this: Put inputfile and rest of the fields in separate 'apex:form' tag or 'apex:Actionregion' tags.
That should resolve the issue.

Answer 2

• If you are okay for using html tag for file instead of apex:inputFile then you may check below solution.
• Limitation : You can use this way if Base64 Encoded body length is 6000000. i.e maximum allowed string length in Apex.

VF Page :

<apex:page controller="htmlAttachmentWithHiddenFieldController">
    <script type='text/javascript'>
var maxStringSize = 6000000;
function uploadFiles()
{
     input = document.getElementById('fileinput');
     console.log('input :' + input);
     file = input.files[0];
            fr = new FileReader();
            fr.onload = receivedBinaryString;
            fr.readAsBinaryString(file);            
      function receivedBinaryString() {            
          document.getElementById("j_id0:j_id2:fileName").value = file.name; // get inputText tag Id by from view source
            var attachment = window.btoa(fr.result)
            document.getElementById("j_id0:j_id2:fileBody").value = attachment;
            var fileSize = attachment.length;  
            console.log('fileSize  : '+fileSize );
            if(fileSize > maxStringSize )
            alert("Base 64 Encoded file is too large.  Maximum size is " + maxStringSize + " your file is " + fileSize + ".");         

        }


}
</script>
    <apex:form>
    <input type="file" multiple="false" id="fileinput" onchange="uploadFiles();"/>
    <apex:inputTextArea value="{!fileBody}"  Id="fileBody" style="display:none;"/>
        <apex:inputText value="{!fileName}"  Id="fileName" style="display:none;"/>
     <apex:commandButton action="{!save}" value="save"/>
    </apex:form>
</apex:page>

Apex Controller :

public class htmlAttachmentWithHiddenFieldController {
public transient String fileBody;
public String getfileBody()
{
    return fileBody;
}
public void setfileBody(String fileBody)
{
    this.fileBody = fileBody;
}
    public String fileName {get; set;}
    public void save()
    {
          Attachment a = new Attachment(parentId = '5000K00000ytwD3', Body =  EncodingUtil.base64Decode(fileBody), name = fileName);
          insert a;
    }
}