I'm using the Ajax Toolkit to upload files on a VF page, like described here. The Upload works fine, the file is available and not damaged. But the response is not coming back properly.

<apex:includeScript value="/soap/ajax/40.0/connection.js" />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" />

<script type="text/javascript">
    function addAttachment(input, parentId){
        var reader = new FileReader();
        var attachFile = $("#"+input)[0].files[0];
        reader.onload = function(e) {
            var attachment = new sforce.SObject('Attachment');  
            attachment.IsPrivate = false;  
            attachment.Name = attachFile.name;
            attachment.Description = attachFile.name;
            attachment.ContentType = attachFile.type;
            attachment.Body = (new sforce.Base64Binary(e.target.result)).toString();
            attachment.ParentId = parentId;

            console.log('lets go');
            var response = sforce.connection.create([attachment]);  

                console.log('file added successfully');
                console.log('error occured');
        return false;

The response logs above (if/else) are not outputted, but the only logs I get are:

lets go

NetworkError: A network error occurred.

The error is thrown in row 595 in the connection.js What actually tells me nothing.

enter image description here

I feel like I'm staying close to the documentation. Any Idea what I might be missing?

2 Answers 2


The reason why this occurred is because the apex:commandButton causes a form POST when you do not use a reRender target and you do not cancel the POST. When a POST occurs, all pending network transactions are cancelled.

There are actually three acceptable ways to fix this:

<apex:commandButton value="Upload" 
    onclick="addAttachment('fileInput', '{!parent.Id}');" 
    rerender="none" /> <!-- "none" can be any value at all -->


<apex:commandButton value="Upload" 
    onclick="addAttachment('fileInput', '{!parent.Id}');" 
    oncomplete="" /> <!-- oncomplete makes this an AJAX call -->


<apex:commandButton value="Upload" 
onclick="addAttachment('fileInput', '{!parent.Id}'); return false;" />
<!-- return false stops the default POST -->
  • thanks for your help, can you explain the difference between returning false on the button vs. returning false in the method? shouldn't it be the same? rerender="" didn't work, but rerender="nothing" did.
    – itsmebasti
    Oct 16, 2017 at 20:35
  • Btw you might also add oncomplete="" to your answer, it did the same thing.
    – itsmebasti
    Oct 16, 2017 at 20:38
  • 1
    @Basti you need to return the false value to the underlying handler. You could also write onclick="return addAttachment(...), but simply returning false from the function itself isn't enough. I'll go ahead and make an edit, though.
    – sfdcfox
    Oct 16, 2017 at 21:38

I had to add the rerender attribute to my commandButton, problem solved.

<apex:commandButton value="Upload" onclick="addAttachment('fileInput', '{!parent.Id}');" rerender="form" />

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .