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

how to create file using jsom in SharePoint online
InfoPath alternatives for form designing SharePoint

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, a multiple textbox as well as a button. Here user will give a name for the file and user can put the file content in the multiline textbox. Then user can submit in the button which will create a text file.

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”>

<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:

<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 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.

Similar SharePoint 2013 Tutorials

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 →

Leave a Reply