• Announcements

    • Shane D.

      Evernote Business Beta - Spaces   12/20/2017

      We're very excited to announce the public beta of an upcoming rework for Evernote Business! To learn more, go Here
    • Shane D.

      2018 Evernote Webinars   01/04/2018

      To kick off the new year, we're excited to announce our  updated schedule for our series of webinars! Please check the events calendar to see which one works best for you!
    • Shane D.

      Upcoming Forum Change Announcement   02/14/2018

      Hi All! You may be seeing some changes with overall organization and layout of the discussion forums. You can learn more by going to the 'Upcoming Forum Change Announcement' in the 'Community Announcements' sub-forum!  
bausk

Adding an image or PDF attachment retrieved via XMLHttpRequest

Recommended Posts

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.

  • Like 1

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.

  • Like 1

Share this post


Link to post