Upload attachment in VisualForce without reloading the whole page

Question

I have a modal window on page, to add attachment. On completion of addition, I have to close the modal window and refresh the attachment details section.

But, I am getting an error if I try to reload a particular section after adding attachment.

apex:inputFile can not be used in conjunction with an action component, apex:commandButton or apex:commandLink that specifies a rerender or oncomplete attribute.

How to resolve this issue? Is there a workaround for this, without reloading the whole page(or using an iFrame)? Or, do we need to replace with some JS library?

Answer 1

Remote action has restriction in terms of file size that can be attached.

Hence, got the solution using sforce:

function addAttachment(){
    var reader = new FileReader();
    var attachFile = document.getElementById('newAttFiles')[0].files[0];

    if(attachFile == undefined){
        alert('Attachment required to proceed');
        return;
    }

    if(attachFile.size > 26214400){  //Where 26214400 is byte equivalent of 25MB
        alert('Attachment size not supported');
    }

    reader.onload = function(e) {
        var attachment = new sforce.SObject('Attachment');  
        attachment.Name = attachFile.name;
        attachment.IsPrivate = false;  
        attachment.ContentType = attachFile.type;
        attachment.Body = (new sforce.Base64Binary(e.target.result)).toString();;
        attachment.Description = attachFile.name;
        attachment.ParentId = recordID;   //Where recordID is the ID of record to which you want to add your attachment
        var result = sforce.connection.create([attachment]);  
        if(result[0].getBoolean("success")){  
            alert('file added successfully');
        }else{
            alert('error occured');
        }
    };
    reader.readAsBinaryString(attachFile);
}

Dependencies:

<script type="text/javascript">
     var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="/soap/ajax/34.0/connection.js" type="text/javascript"></script>

Answer 2

You can use Javascript remoting to upload file. However it will reqire understanding of Javascript.

Steps are as follow:

1. Pull file details from input type file using js File API
2. Send it using javascript remoting
3. Upload that file in apex function bound with javascript remoting
4. Get the status on VF page and show message

No reloading required.