SharePoint Online: Create folder inside document library using JSOM

Article
1/17/2024

Introduction:

In this post, we will discuss how we can create a folder inside a document library using JavaScript object model (JSOM) in SharePoint online Office 365. We have also discussed how we can create a folder inside a document library using Rest API 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 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  () {
 
        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 Create Folder. It will create the folder and give a successful message like below:

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

References:

If you want to learn about Microsoft flow and Rest API then you can see below articles:

Conclusion:

Here we have discussed how we can create a folder inside document library in SharePoint Online Office 365.

Share via