Read, create, update, delete file using JavaScript object model (jsom) in SharePoint

sharepoint jsom create update delete file
SharePoint deveopment training course

This jsom SharePoint tutorial, we will discuss how to create a file inside a document library using the JavaScript object model (jsom) in SharePoint. Also, we will see how to read and update file content using JavaScript in SharePoint. We will discuss, how to delete a file from SharePoint document library using the JavaScript object model (jsom).

The jsom code we can use to create, update, read and delete a file using javascript in SharePoint Online as well as SharePoint on-premises like SharePoint 2013/2016.

Here we will use a script editor web part or a content editor web part to do the examples in a SharePoint Online site.

Create a file using JavaScript in SharePoint document library

Now, we will see how to create a file using the JavaScript object model (jsom) in SharePoint Online or SharePoint 2013/2016.

Here in this particular example let us take an HTML form which has a textbox, multiple text boxes as well as a button. Here the user will give a name for the file and the user can put the file content in the multiline textbox. Then the user can submit in the button which will create a text file in a SharePoint document library.

Here we will write both the HTML code as well as in the JavaScript object model (jsom) inside a script editor web part which will be inside a web part page in SharePoint. The HTML code will look like below:

HTML Code:

<div id="CreateFile">
<div>
<strong>Enter a title for the document:</strong>
<br />
<input type="text" id="txtDocumentTitle" />
</div>
<div>
<strong>Enter content for the document:</strong>
<br />
<textarea cols="20" id="txtDocumentContent"></textarea>
</div>
<br />
<input type="button" id="btnSubmit" value="Submit" />
</div>
<div id="divResults"></div>

JSOM Code:

Below is the code to create a file in the document library using jsom.

<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));
}

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 successfully created!");
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());
}
</script>

Once we will Save the page you can see a page like below where user can give a title for the file, then the user can put content in the content textbox and then the user can click on the submit button which will create a file inside the SharePoint document library like below:

create file using jsom in sharepoint

Now you can check in the SharePoint document library where you can see the file got created in the document library.

create file using javascript in sharepoint online

This is how we can create a file inside a SharePoint document library using javascript.

Read file content using JavaScript object model (jsom) in SharePoint

Now, we will see how to read file content from a document library using javascript in SharePoint.

Here we have taken a button, on click on that button we will read the content of the document and will display in a div. Here we will write both HTML and javascript object model code inside a script editor web part which we will add inside a SharePoint web part page.

HTML Code:

<input type="button" id="btnSubmit" value="Read Document" /><br />
<div id="divReadDocument" />

Jsom Code:

Below is the JSOM code to read content from a file which is presented in a SharePoint document library.

<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 () {
readDocument();
});
}

function readDocument() {
var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/Shared Documents/Bijay.txt";
$.ajax({
url: fullUrl,
type: "GET"
})

.done(function (data) {
$("#divReadDocument").html(data);
})
.fail(function () {
alert("error");
});
}
</script>

Once you will Save the page and click on the button, you can see the .txt file content like below:

read file content using javascript in sharepoint

This is how we can read file content using javascript object model (jsom) in SharePoint Online/2013/2016.

Update file content using JavaScript object model (jsom) in SharePoint

Now, we will see how to update file content using the JavaScript object model (jsom) in SharePoint Online or SharePoint 2013/2016.

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:

Below is the jsom code to update the file content jsom in SharePoint.

<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 the user clicks on the Update Document Content button, the document will get updated.

update file content using javascript in sharepoint

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

update file content using jsom in sharepoint

This is how we can update file content in SharePoint using the JavaScript object model (jsom).

Delete file from document library using JavaScript object model (jsom) in SharePoint

Now, we will discuss how to delete a file from a SharePoint document library using a JavaScript object model (jsom). The same jsom SharePoint code we can use to delete a file from the document library in SharePoint Online as well as SharePoint 2013/2016.

Here in this example let us take an input textbox and a button, where the user can put the file name to delete and click on the Delete File button to delete the file from the SharePoint document library.

Here we will put the JavaScript and the HTML code inside a script editor web part which we will put inside a web part page. And in this example, we are searching for the file inside the Documents document library.

HTML Code:

<div id="DeleteFile">
<div>
<strong>Enter File Name to Delete:</strong>
<br />
<input type="text" id="txtDocumentTitle" />
</div>
<br />
<input type="button" id="btnSubmit" value="Delete File" />
</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 () {
deleteDocument();
});
}

function deleteDocument() {
var docTitle = $("#txtDocumentTitle").val() + ".txt";
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
var fileUrl = _spPageContextInfo.webServerRelativeUrl + "/Shared Documents/" + docTitle;
this.fileToDelete = oWebsite.getFileByServerRelativeUrl(fileUrl);
this.fileToDelete.deleteObject();
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
$("#divResults").html("Document successfully deleted!");
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

</script>

Once you Save the code, you can see a page like below where user can give the file name and then click on the button and on successful deletion it will display a message like below:

delete file from document library using jsom sharepoint

After this, if you will go to the SharePoint document library, you can not find the document because it has been already deleted.

delete file from sharepoint document library using jsom

This SharePoint tutorial explains, how to delete a file from a document library using the JavaScript object model (jsom) in SharePoint.

You may like following SharePoint jsom tutorials:

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →