How to update file content using JavaScript object model jsom in SharePoint Online Office 365?

Here we will discuss how we can update file content using JavaScript object model jsom in SharePoint Online Office 365. The same code will work for Office 365 SharePoint Online sites also. Before reading this article, you can check these two articles on

–Steps to create a file using javascript object model in SharePoint Online Office 365

-How to read file content using JavaScript object model jsom in SharePoint Online Office 365?

Here let us take a textbox where the user can enter a file name, and a multiline textbox where the user can enter the content and a submit button. On click of the submit button, the content will be updated in the file name given in the textbox.

Here as usual like other examples, we will write the code inside a script editor web part which we will put inside a web part page.

HTML Code:

<div id=”UpdateFile”>

<div>

<strong>Document Title to Update</strong>

<br />

<input type=”text” id=”txtDocumentTitle” />

</div>

<div>

<strong>Enter Update Document Content:</strong>

<br />

<textarea cols=”20″ id=”txtDocumentContent”></textarea>

</div>

<br />

<input type=”button” id=”btnSubmit” value=”Update Document Content” />

</div>

<div id=”divResults”></div>

Jsom Code:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

<script>

$(function () {

bindButtonClick();

});

function bindButtonClick() {

$(“#btnSubmit”).on(“click”, function () {

createDocument();

});

}

function createDocument() {

var docTitle = $(“#txtDocumentTitle”).val() + “.txt”;

var docContent = $(“#txtDocumentContent”).val();

var clientContext = new SP.ClientContext();

var oWebsite = clientContext.get_web();

var oList = oWebsite.get_lists().getByTitle(“Documents”);

var fileCreateInfo = new SP.FileCreationInformation();

fileCreateInfo.set_url(docTitle);

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

for (var i = 0; i < docContent.length; i++) {

fileCreateInfo.get_content().append(docContent.charCodeAt(i));

fileCreateInfo.set_overwrite(true);

}

this.newFile = oList.get_rootFolder().get_files().add(fileCreateInfo);

clientContext.load(this.newFile);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onQuerySucceeded),

Function.createDelegate(this, this.onQueryFailed)

);

}

function onQuerySucceeded() {

$(“#divResults”).html(“Document updated successfully!”);

}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() +

‘\n’ + args.get_stackTrace());

}

</script>

Once you save the page, you can see the form like below, where user can give the name of the file and then the content to update. Once user click on the Update Document Content button, the document will get updated.

Now if you will open the document library and see the file content, you can see the updated content.

Hope this will be helpful.