Upload Note Attachment using Javascript and REST

Adding notes (annotations) in Microsoft dynamics CRM through custom client side code can be tricky especially when it comes to uploading attachment files. In this tutorial we’ll learn how to create a note and upload attachment using REST.

First of all we have made a custom HTML form as shown in the screenshot below

It has fields for Title, Description and a File Upload Control. The OnClick method behind the save button is given below

function save() {
var file = document.getElementById("file").files[0];
var subject = document.getElementById("title").value;
var desc = document.getElementById("text").value;
if (file) {
var reader = new FileReader();
reader.onload = function (evt) {
var str = _arrayBufferToBase64(reader.result);
createNote(subject, desc, str, file.name, file.type);
}
reader.readAsArrayBuffer(file);
}
else {
createNote(subject, desc, null, null, null);
}
}

First of all we are converting the uploaded file to base64 string by  _arrayBufferToBase64() method whose definition is given below.

 function _arrayBufferToBase64(buffer) { // Convert Array Buffer to Base 64 string
 var binary = '';
 var bytes = new Uint8Array(buffer);
 var len = bytes.byteLength;
 for (var i = 0; i < len; i++) {
 binary += String.fromCharCode(bytes[i]);
 }
 return window.btoa(binary);
 }

Then we are passing the user entered data along with the file name and file MIME type to our custom createNote() method, the definition of which is given below.

function createNote(title, description, docBody, fName, mType) {
 var entity = {};
 if (docBody != null & fName != null & mType != null) {
 entity.DocumentBody = docBody;
 entity.FileName = fName;
 entity.MimeType = mType;
 }
 entity.Subject = title;
 entity.NoteText = description;
 entity.ObjectId = {
 Id: id,
 LogicalName: nam
 };
 SDK.REST.createRecord(
 entity,
 "Annotation",
 function (result) {
 var newEntityId = result.AnnotationId;
 },
 function (error) {
 Xrm.Utility.alertDialog(error.message, null);
 }
 );
 }

And that’s it, you have successfully created a note record with the attachment using OData REST.

See also: Download Notes Attachments using Javascript and REST

The complete code for above tutorial is given below.

/* Note: Modify the ‘id’ and ‘nam’ variables according to your scenario, this is for the case if you are opening a custom web resource from an entity */
// Get Id and entity Name from the parent opener
var id = opener.parent.Xrm.Page.data.entity.getId();
var nam = opener.parent.Xrm.Page.data.entity.getEntityName();
function _arrayBufferToBase64(buffer) { // Convert Array Buffer to Base 64 string
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}

// function for Creating note record using SDK REST
function createNote(title, description, docBody, fName, mType) {
var entity = {};
if (docBody != null & fName != null & mType != null) {
entity.DocumentBody = docBody;
entity.FileName = fName;
entity.MimeType = mType;
}
entity.Subject = title;
entity.NoteText = description;
entity.ObjectId = {
Id: id,
LogicalName: nam
};
SDK.REST.createRecord(
entity,
"Annotation",
function (result) {
var newEntityId = result.AnnotationId;
opener.RetrieveAnnotations(null);
window.close();
},
function (error) {
Xrm.Utility.alertDialog(error.message, null);
}
);
}
// function behind the onclick of Save button
function save() {
var file = document.getElementById("file").files[0];
var subject = document.getElementById("title").value;
var desc = document.getElementById("text").value;
if (file) {
var reader = new FileReader();
reader.onload = function (evt) {
var str = _arrayBufferToBase64(reader.result);
createNote(subject, desc, str, file.name, file.type);
}
reader.readAsArrayBuffer(file);
}
else {
createNote(subject, desc, null, null, null);
}
}

Feel free to ask if you have any issues in following this tutorial in the comments below.