[SalesForce] Error while uploading content document through visualforce page with javascript to invoke Force.com REST API

I'm working on a visualforce page to give our portal users ability to upload Content Documents to Library. I'm using the solution in this article: http://www.allsalesforce.com/articles/share/756339/. I uploaded the forcetk.js as a static resource (Source: https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit/blob/master/forcetk.js) and added a new remote site setting with our sandbox URL.

Before using this javascript to invoke Force.com REST API, I used a visualforce page with <apex:inputFile value="{!file.versionData}" fileName="{!file.pathOnClient}" />. It worked fine for files < 10 MB. But the files from our portal users would be larger than that. So I'm trying to use REST API to increase the file size limit to 2 GB.

The code I added to our sandbox is: 

<apex:page standardController="Case">
    <p>
        Select a file to upload.
    </p>
    <input type="file" id="file" onchange="upload()"/>
    <p id="message"></p>
    <script src="{!$Resource.forcetk}"></script>
    <script>
        var client = new forcetk.Client();
        var result = sforce.connection.login("adminusername", "password"+"securitytoken"); 
        client.setSessionToken(result.sessionId);
        function upload() 
        {
            var file = document.getElementById("file").files[0];
            client.createBlob('ContentVersion', {
                Origin: 'C', 
                PathOnClient: file.name
            }, file.name, 'VersionData', file, function(response){
                console.log(response);
                document.getElementById("message").innerHTML = "File uploaded: <a href=\"/" + response.id +
                    "\">Take a look!</a>";
            }, function(request, status, response){
                console.log(response);
                document.getElementById("message").innerHTML = "Error: " + status;
            });
        }
    </script>
</apex:page>

I added a new custom link on Case object with the above vf page as the source. When I try to upload a file using this link on Case record, I'm getting this error: Error: Unable to forward request due to: no protocol: null/services/data/null/sobjects/ContentVersion/. I also tried with Origin: 'H' (chatter file), but got the same error. I have no clue why I'm getting this error. Any help is appreciated. Thanks!

Best Answer

I see you are using Viusalforce and I feel you are messing with Session ID .I tested below code and works in my org

<apex:page standardController="Case">
<p>
    Select a file to upload.
</p>
<input type="file" id="file" onchange="upload()"/>
<p id="message"></p>
<script src="{!$Resource.forcetk}"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>

var client = new forcetk.Client();
client.setSessionToken('{!$Api.Session_ID}');

    function upload() 
    {
        var file = document.getElementById("file").files[0];
        client.createBlob('ContentVersion', {
            Origin: 'C', 
            PathOnClient: file.name
        }, file.name, 'VersionData', file, function(response){
            console.log(response);
            document.getElementById("message").innerHTML = "File uploaded: <a href=\"/" + response.id +
                "\">Take a look!</a>";
        }, function(request, status, response){
            console.log(response);
            document.getElementById("message").innerHTML = "Error: " + status;
        });
    }
</script>

Two things I did differently

  1. The Session Id can be easily obtained using global merge field {!$Api.Session_ID}
  2. I included jquery library as the whole set up needs jquery library to function properly
Related Topic