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?


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.
    – Basti
    Oct 16 '17 at 20:35
  • Btw you might also add oncomplete="" to your answer, it did the same thing.
    – Basti
    Oct 16 '17 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 '17 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" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.