2

I have been trying to upload file from Visualforce using the blog tutorial on developerforce that explains CORS feature.I am preferring REST API tied with VF since I need to built lot of other client side actions based on response like progress bar and other cool features

https://developer.salesforce.com/blogs/developer-relations/2015/01/spring-15-preview-cors-force-com-rest-api.html

I used exact same code with forceTk imported in my VF

<apex:page docType="html-5.0" title="File Uploader">
<h3>Select a file to upload as a new Chatter File.</h3>
 <input type="file" id="file" onchange="upload()"/>
 <p id="message"></p>
 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="{!$Resource.forcetk}"></script>
 <script>
var client = new forcetk.Client();

// Get the token from Visualforce
client.setSessionToken('{!$Api.Session_ID}');

function upload() {
  var file = $("#file")[0].files[0];
  client.createBlob('ContentVersion', {
    Origin: 'H', // 'H' for Chatter File, 'C' for Content Document
    PathOnClient: file.name
  }, file.name, 'VersionData', file, function(response){
    console.log(response);
    $("#message").html("Chatter File created: <a target=\"_blank\" href=\"/" + 
      response.id + "\">Take a look!</a>");
  }, function(request, status, response){
    $("#message").html("Error: " + status);
    });
  }
</script>
</apex:page>

trying for few hours now I get below error in the javascript console only for firefox browser .Worked well in chrome

enter image description here

It worked well in chrome but chrome also throws an error but still file upload succeeds while in mozilla it fails .

In chrome the error message is as below

enter image description here

Any help will be appreciated

2

The comment in the data was a red herring - that's just JavaScript code, rather than JSON, so comments are perfectly ok.

I tracked the issue down to line 326 of forcetk.js:

return this.asyncAjax ? JSON.parse(request.response) : null;

Here, the blob function should return either null, if this is an asynchronous call (the usual case), or JSON.parse(request.response) for the synchronous case.

Now the problem is that, as written above, the logic is reversed! In the usual, async case, we are trying to parse an empty response, where we should be returning null.

Easy fix - I just pushed it to the repo.

| improve this answer | |
  • Thank you Pat .I just realised that same fix needs to be also done to line no 309 .I just updated that and then all worked .Thanks so much !!!! Will catch up with you someday and I owe you a beer for this fix :) – Mohith Shrivastava May 26 '15 at 18:47
2

Take a look at this bit here:

client.createBlob('ContentVersion', {
  Origin: 'H', // 'H' for Chatter File, 'C' for Content Document
  PathOnClient: file.name
}, ...

Unfortunately, there is no valid way to pass comments inline in JSON, like there is at the end of the line beginning with Origin. Take a look at this Stackexchange question about comments in JSON.

This code also breaks JSON rules that field names should be strings, which some JSON engines will object to.

In fact, if I attempt to pass this JSON string through the JSONLint JSON validator, it spits out the following and throws an error:

{
  Origin: 'H',
  //'H'forChatterFile,
  'C'forContentDocumentPathOnClient: file.name
}

Even when adding quotes around "Origin" and "PathOnClient" it still pretty much comes up with the same thing.

I would suggest relocating the comment after the "Origin" fieldname, and adding quotes around the field names. So something like this:

//in Origin field below 'H' for Chatter and 'C' for Content
client.createBlob('ContentVersion', {
  'Origin': 'H', 
  'PathOnClient': file.name
}, ...

As to why Chrome objects and still gets on with it, whereas Mozilla takes off its leather glove and slaps you in the face? Well...that's just the vagaries of browsers and their differing philosophies and development teams.

As to why my respected colleague included the code as is in this post? It probably worked at some point. Perhaps it was not tested on Mozilla. The comment could have been added to the code in the post to help document it (I do that all the time). If fixing this resolves your problem, I will bring it to his attention. I can say with certainty he will want to know that this didn't work for you, and what did.

| improve this answer | |

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.