bausk

Adding an image or PDF attachment retrieved via XMLHttpRequest

5 posts in this topic

Hi,

in a Chrome extension, I am trying to create a note with an attachment retrieved from the web. I tried multiple ways to add the binary data as described in the web API help but the attachment won't show properly.

I retrieve the attachment as a string using code:


function getLink(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', document.getElementById('url1').value, true);
xhr.responseType = 'blob';
// xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onload = function(e) {
if (this.status == 200) {
// Note: .response instead of .responseText
var blob = new Blob([this.response], {type: 'application/octet-stream'});
//blob = this.response;
var reader = new FileReader();
reader.readAsBinaryString(blob);
reader.onload = function(e) {
var contents = e.target.result;
AddNote1(url, contents, function(response) {
document.getElementById('result').innerHTML += String(response).replace(/\n/g, "<br/>") + "<br/>";
document.getElementById('result').innerHTML += contents.slice(1, 10);
} );
}
}
};
xhr.send();
}

I tried to override the mime type with plaintext, image/jpeg, and leave it as-is, but none seem to work.

Then I construct the Note object and this is where the string format doesn't seem to work:


function AddNote1(Name, ContentFile, callback)
{
var noteStore = get_NoteStore();
var note = new Note();
note.title = Name;
var na = new NoteAttributes();
//na.author = "someone";
na.sourceURL = Name;
na.source = "web.clip";
note.attributes = na;
var data = new Data();
var resource = new Resource();
data.size = ContentFile.length;
alert(ContentFile.length);
data.bodyHash = raw_md5(ContentFile);
data.body = ContentFile;
resource.mime = "image/jpeg";
resource.data = data;
var resAttributes = new ResourceAttributes();
resAttributes.fileName = String(Name).replace(/^.*[\/\\]/g, '');
resource.attributes = resAttributes;
note.resources = Array(resource);
//important to set correct content
var content = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
+ "<!DOCTYPE en-note SYSTEM \"http://xml.evernote.com/pub/enml2.dtd\"><en-note>";
content += String("Oi Wei").replace(/\n/g, "<br/>") + "<br/>";
content += "<en-media type=\"image/jpeg\" hash=\"" + md5(ContentFile) + "\"/>";
content += "</en-note>";
note.content = content;
//response is a created note
//callback function process response
var response = noteStore.createNote(Eventnote.Auth.get_auth_token(), note);
if (callback !== undefined) {
callback(response);
}

The byte length of attachment string seems to equal the actual file. I think there is a problem with encoding.

Is there any way to get the proper encoding or retrieve the file properly to attach it to a note?

Share this post


Link to post

I managed to make sure via debug that the data gets into the Note structure uncorrupted. This fragment works well with PDF files:


data.body = binaryData;
resource.mime = "application/pdf";
resource.data = data;
...
note.resources = Array(resource);
//important to set correct content
...
//response is a created note
//callback function process response
var response = noteStore.createNote(Eventnote.Auth.get_auth_token(), note);

The problem is, however, that when I retrieve the uploaded file from Evernote, it comes strangely corrupted.

Here are the two files, the original uploaded file and the file that ends up in Evernote:

1. original.pdf, 2898 bytes.

2. evernote.pdf, 3018 bytes.

Here is the illustrated corrupted fragment (there are more like that in the file) and the files for comparison:

http://www.evernote.com/shard/s138/sh/7285174e-83c2-442e-a3fd-2392298d915f/2758cbad054dd48acde3fb944142fb43

Share this post


Link to post

I figured out the problem resides in the Kanda Software's Evernote SDK library. The resources data gets encoded with UTF and remains garbled.

Can I just tweak thrift and types to bypass the UTF encoding for resource body? It doesn't seem to work.

1 person likes this

Share this post


Link to post

Um, okay...

After I posted this on Stackoverflow, http://stackoverflow.com/questions/13779434/binary-file-saved-to-evernote-from-chrome-extension-via-thrift-is-garbled-after, it became apparent that the only way to cope with this is to decode the file before it is processed.

Still, my conversion leaves higher-order unicode characters botched. Woul you recommend any utf8-decode Javascript implementation that doesn't have this problem?

Share this post


Link to post

I have come to conclusion that adding a resource correctly is impossible in Javascript. I moved this functionality over to a Python-based backend.

1 person likes this

Share this post


Link to post