Create a folder inside SharePoint document library using Rest API and JavaScript

create folder using rest api sharepoint 2013
SharePoint deveopment training course

This SharePoint Rest API tutorial, we will discuss, how to create a folder inside the document library using Rest API in SharePoint Online Office 365. We will also see how to create a folder inside a document library using the JavaScript object model (jsom) in SharePoint Online.

The same rest API code we can use to create a folder inside a document library in SharePoint 2016 and SharePoint 2013.

SharePoint rest api create folder

In this example, we have created an HTML form which has a textbox and a submit button. The user can give a folder name in the textbox and click on submit. On successful creation of the folder inside the document library, it will show a successful message.

Here let us put every code inside a script editor web part in the SharePoint web part page. So both the HTML and rest API code we will put inside script editor web part inside a web part page.

Below is the HTML code:

<div>
<strong>Enter Folder Name:</strong>
<input type="text" id="txtFolderName" />
<input type="button" id="btnSubmit" value="Submit" />
</div>
<div id="divResults"></div>

Rest API code:
In the below code, we will create a folder inside the “Documents” document library. In the metadata, we are passing through ServerRelativeUrl where we want to create the 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 () {
createFolder();
});
}

function createFolder() {
var folderName = $("#txtFolderName").val();
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var fullUrl = siteUrl + "/_api/web/folders";
$.ajax({
url: fullUrl,
type: "POST",
data: JSON.stringify({
‘__metadata’: { ‘type’: ‘SP.Folder’ },
‘ServerRelativeUrl’: ‘Shared Documents/’ + folderName
}),
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: onQuerySucceeded,
error: onQueryFailed
});
}

function onQuerySucceeded() {
$("#divResults").html("Folder created successfully !!!");
}

function onQueryFailed() {
alert(‘Error!’);
}
</script>

Once you will Save the code, give a name for the folder and click on Submit. It will show a successful message like below:

SharePoint rest api create folder

Now if you will go to the SharePoint Documents document library, you can see the folder got created like below:

SharePoint rest api create folder inside document library

Create a folder using JavaScript in SharePoint

Now, we will see how to create a folder inside a document library using the JavaScript object model(jsom) in SharePoint Online Office 365.

Here we will take a textbox and a button where a user can give a name for the folder and click on Create Folder button which will create the folder inside the document library. Both the HTML and javascript object model code, let us put inside a script editor web part which will be inside a web part page.

HTML Code:

Below is the full HTML code where we have to take an HTML textbox and an HTML button.

<div>
<strong>Enter FolderName:</strong><br />
<input type="text" id="txtFolderName" /><br />
<input type="button" id="btnSubmit" value="Create Folder" />
</div>
<div id="divResults"></div>

JSOM Code:

Below is the full jsom code. Here also we have given reference to the jQuery min file because we have used jQuery to bind the button click even as well as we are also retrieving the textbox value using jQuery like below:

var folderName = $("#txtFolderName").val();

Here we are creating the folder inside “Documents” document library, if you want to give any other document library then you can just replace the document library name is the below line.

var oList = oWebsite.get_lists().getByTitle("Documents");

Below is the full jsom code to create a folder inside 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 () {
createFolder();
});
}

function createFolder() {
var folderName = $("#txtFolderName").val();
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
var oList = oWebsite.get_lists().getByTitle("Documents");
var folderCreateInfo = new SP.ListItemCreationInformation();
folderCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
folderCreateInfo.set_leafName(folderName);
this.oListItem = oList.addItem(folderCreateInfo);
this.oListItem.update();
clientContext.load(oList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
$("#divResults").html("Folder successfully created!");
}

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

Once you save the page and refresh, you can see the HTML controls. Give a name for the folder and then click on Create Folder. It will create the folder and give a successful message like below:

create folder inside document library using javascript

You can also navigate to the document library, where you can see the folder got created like below.

create folder inside sharepoint document library using jsom

This is how we can create a folder inside a document library using JavaScript object model (jsom) in SharePoint Online.

You may like following SharePoint Rest API tutorials:

This SharePoint tutorial explained, how to create a folder inside the document library using Rest API in SharePoint.

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 →