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

how to create file using jsom in SharePoint online

In this post, we will discuss how we can create a file using javascript object model (jsom) in SharePoint Online Office 365. This code will work as it is in SharePoint 2013 and SharePoint 2016.

Here in this particular example let us take a textbox, multiple text boxes as well as a button. Here 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.

SharePoint deveopment training course

Also you can check some useful posts on:
How to delete file using Rest API in SharePoint Online Office 365?

Rename SharePoint 2013 list column title in list view using jQuery

Fetch List view using JavaScript object model in SharePoint 2013

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. The html code will looks like below:

HTML Code:

<div id=”CreateFile”>


<strong>Enter a title for the document:</strong>

<br />

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



<strong>Enter content for the document:</strong>

<br />

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


<br />

<input type=”button” id=”btnSubmit” value=”Submit” />


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

JSOM Code:

<script src=””></script>


$(function () {



function bindButtonClick() {

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




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_content(new SP.Base64EncodedByteArray());

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



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



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



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

how to create file using jsom in SharePoint online
how to create file using jsom in SharePoint online

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

create file using jsom, sharepoint 2013
create file using jsom, sharepoint 2013

Hope this will be helpful.

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)


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

View all posts by Bijay Kumar →