SharePoint  

Folder Management in SharePoint Online with PnPjs and SPFx

Managing folders effectively is a core requirement in many SharePoint solutions. Whether you’re organizing documents, creating subfolders dynamically, or validating folder structures, PnPjs makes it straightforward inside an SPFx (SharePoint Framework) project.

In this article, we’ll explore.

  • Creating folders and subfolders
  • Retrieving folder metadata
  • Uploading files directly to folders
  • Updating and deleting folders
  • Best practices for folder management

🔹 Setting up PnPjs in SPFx

If you haven’t already, configure PnPjs in your SPFx web part.

import { spfi, SPFx } from "@pnp/sp";
import "@pnp/sp/folders";
import "@pnp/sp/files";
import "@pnp/sp/webs";
import "@pnp/sp/lists";

const sp = spfi().using(SPFx(this.context));

This ensures your component can access folder and file APIs across SharePoint.

🔹 Creating a Folder in a Document Library

// Create folder at root of a document library
await sp.web.lists.getByTitle("Documents").rootFolder.folders.add("ProjectDocs");

// Create a nested subfolder inside "ProjectDocs"
await sp.web.getFolderByServerRelativePath("Shared Documents/ProjectDocs").folders.add("2025");

✅ Tip: Always use server-relative URLs (Shared Documents/...) when targeting folders.

🔹 Getting Folder Metadata

const folder = await sp.web.getFolderByServerRelativePath("Shared Documents/ProjectDocs").select("Name", "ItemCount")();
console.log(`Folder Name: ${folder.Name}, Items: ${folder.ItemCount}`);

This helps retrieve essential details such as item count, name, and unique URL.

🔹 Uploading Files to a Folder

const file = await sp.web
  .getFolderByServerRelativePath("Shared Documents/ProjectDocs/2025")
  .files.add("report.txt", "This is file content", true);

console.log(`File uploaded: ${file.data.Name}`);
  • The third parameter (actual) allows overwriting existing files.
  • Use .addChunked for large file uploads.

🔹 Renaming / Moving a Folder

// Move or rename folder
await sp.web
  .getFolderByServerRelativePath("Shared Documents/ProjectDocs/2025")
  .moveTo("Shared Documents/ProjectDocs/Archive/2025");

This is particularly useful when reorganizing content.

🔹 Deleting a Folder

await sp.web.getFolderByServerRelativePath("Shared Documents/ProjectDocs/Archive/2025").delete();
console.log("Folder deleted successfully");

⚠️ Deleting a folder also removes all files/subfolders inside it. Always validate before execution.

🔹 Best Practices for Folder Management

  • ✅ Use consistent naming: Avoid spaces and special characters in folder names where possible.
  • ✅ Validate before creation: Check if a folder already exists to prevent duplicates.
  • ✅ Leverage permissions: Ensure users have the correct permissions before allowing create/delete actions.
  • ✅ Audit structure: For enterprise solutions, log folder creation/deletion for governance.

🔹 Conclusion

With PnPjs in SPFx, folder management in SharePoint Online becomes clean, modern, and efficient. From creating nested folders to uploading files and reorganizing structures, you can automate document library management with just a few lines of code.

In the following article, we’ll explore advanced document sets and metadata-driven folder management for enterprise-grade solutions.

Membership not found