I want to upload a word document to sharepoint document library using javascript (say for ex .Net site).

How can i achieve this?

  • @AmalHashim I am new to Sharepoint, don't have idea how to achieve this
    – User5590
    Apr 27 '15 at 12:01
  • In order to use JavaScript Client Object Model you need all JS files. These files reside in SharePoint server. So I don't think you can use it outside SharePoint. You can use SharePoint .Net Client Object Model I think. Apr 27 '15 at 12:02
  • @AmalHashim Can't i just copy all required js to my application, and then use javascript code to do this?
    – User5590
    Apr 27 '15 at 12:03
  • Is this useful - msdn.microsoft.com/EN-US/library/office/dn769086.aspx ?
    – User5590
    Apr 27 '15 at 12:05
  • @AmalHashim is correct, Sharepoint Client Object Model will be a good choice for you in this case Apr 27 '15 at 14:40

It's still quite uncomfortable to upload documents by using the JSOM API. But it's possible.

In your case your Word file must be not larger than 1.5 MB. Additionally the clients browser must support HTML5.

Here is a code example (it references also the jQuery library):

$(document).ready(function ()
    // Get the URI decoded host web URL
    // We will use this to get a context here to write data
    hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));

function CreateFile()
    // Ensure the HTML5 FileReader API is supported
    if (window.FileReader)
        input = document.getElementById("fileinput");
        if (input)
            file = input.files[0];
            fr = new FileReader();
            fr.onload = receivedBinary;
        alert("The HTML5 FileSystem APIs are not fully supported in this browser.");

// Callback function for onload event of FileReader
function receivedBinary()
    // Get the ClientContext for the app web
    clientContext = new SP.ClientContext.get_current();
    // Use the host web URL to get a parent context - this allows us to get data from the parent
    parentCtx = new SP.AppContextSite(clientContext, hostweburl);
    parentWeb = parentCtx.get_web();
    parentList = parentWeb.get_lists().getByTitle("Documents");

    fileCreateInfo = new SP.FileCreationInformation();
    fileCreateInfo.set_content(new SP.Base64EncodedByteArray());

    // Read the binary contents of the base 64 data URL into a Uint8Array
    // Append the contents of this array to the SP.FileCreationInformation
    var arr = convertDataURIToBinary(this.result);
    for (var i = 0; i < arr.length; ++i)

    // Upload the file to the root folder of the document library
    this.newFile = parentList.get_rootFolder().get_files().add(fileCreateInfo);

    clientContext.executeQueryAsync(onSuccess, onFailure);

function onSuccess()
    // File successfully uploaded

function onFailure()
    // Error occurred
    alert("Request failed: " + arguments[1].get_message());

// Utility function to remove base64 URL prefix and store base64-encoded string in a Uint8Array
// Courtesy: https://gist.github.com/borismus/1032746
function convertDataURIToBinary(dataURI)
    var BASE64_MARKER = ';base64,';
    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
    var base64 = dataURI.substring(base64Index);
    var raw = window.atob(base64);
    var rawLength = raw.length;
    var array = new Uint8Array(new ArrayBuffer(rawLength));

    for (i = 0; i < rawLength; i++)
        array[i] = raw.charCodeAt(i);
    return array;

When you work with larger files you must use the REST API following by MSDN.

  • Any particular reason to prefer an AppContextSite over a ClientContext?
    – jpaugh
    Sep 6 '17 at 14:28
  • Using readAsDataURL requires you to convert from base64 to binary (with atob), and then convert back to base64 with SP.Base64EncodedArray. If you instead use readAsBinaryString, then you can replace the entire "convert" function with var _array = this.result.split("").map(function (char) { return char.charCodeAt(0)}) and var array = new Uint8Array(_array) (Of course, for loop would be more performant in this case, but is still much simpler.)
    – jpaugh
    Sep 6 '17 at 20:09

If you want to add metadata with file. Here is the link.

File Upload with metadata

  • 1
    do not post links only, put some extract from it along. Links may go down/ break after some time
    – Gaurravs
    Jul 1 '16 at 10:48

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.