File Uploader using ForceTK using multipart message not working in mozilla

Question

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

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

Any help will be appreciated

Answer 1

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.

Answer 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.