Upload, Download, and Manage Files in SharePoint Online

Working with SharePoint files is one of the most common requirements when building business solutions. Whether you need to upload documents, download reports, or manage version history, PnPjs makes it seamless inside your SPFx web parts.

In this article, we’ll explore how to create, upload, download, update, and delete files in SharePoint libraries using PnPjs v3.

Prerequisites

Before starting, ensure you’ve set up PnPjs in your SPFx project as explained in the earlier article of this series.

npm install @pnp/sp @pnp/graph @pnp/logging @pnp/queryable

Configure the PnPjs instance (spfi) in your component.

import { spfi } from "@pnp/sp";
import { SPFx } from "@pnp/sp/presets/all";

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

📂 Upload a File

You can upload files to a document library using add or addChunked (for large files).

// Upload small files (< 250MB)
await sp.web.getFolderByServerRelativePath("/sites/demo/Shared Documents")
  .files.add("example.txt", "Hello PnPjs File!", true); // true = overwrite

For large files.

// Upload large files (chunked upload)
const file = await fetch("/localpath/bigfile.pdf").then(r => r.blob());

await sp.web.getFolderByServerRelativePath("/sites/demo/Shared Documents")
  .files.addChunked("bigfile.pdf", file, data => {
    console.log(`Progress: ${data.blockNumber}/${data.totalBlocks}`);
  }, true);

📥 Download a File

To download a file, you can get its binary blob or text.

// Get file content as text
const fileContent = await sp.web
  .getFileByServerRelativePath("/sites/demo/Shared Documents/example.txt")
  .getText();
console.log(fileContent);

// Get file as blob
const blob = await sp.web
  .getFileByServerRelativePath("/sites/demo/Shared Documents/bigfile.pdf")
  .getBlob();

✏️ Update File Content

If you need to replace the content of an existing file.

await sp.web.getFileByServerRelativePath("/sites/demo/Shared Documents/example.txt")
  .setContent("Updated content!");

🗑️ Delete a File

Deleting is straightforward.

await sp.web
  .getFileByServerRelativePath("/sites/demo/Shared Documents/example.txt")
  .delete();

📜 File Metadata and Properties

You can also update file metadata (e.g., Title, custom columns).

await sp.web.getFileByServerRelativePath("/sites/demo/Shared Documents/example.txt")
  .listItemAllFields.update({
    Title: "Updated File Title",
    Category: "Reports"
  });

📑 Get File Versions

SharePoint maintains file version history.

// Get versions
const versions = await sp.web
  .getFileByServerRelativePath("/sites/demo/Shared Documents/example.txt")
  .versions();

// Delete a version
await sp.web
  .getFileByServerRelativePath("/sites/demo/Shared Documents/example.txt")
  .versions.getById(1)
  .delete();

Best Practices

• Use chunked uploads for files over 10 MB.
• Always check whether the folder exists before uploading.
• For performance, avoid fetching file contents unless necessary.
• Manage permissions carefully, not every user may have upload/delete rights.

Conclusion

With PnPjs, managing SharePoint files in SPFx is clean and developer-friendly. From uploading documents to fetching version history, these APIs cover all major scenarios.

In the next article, we’ll dive into Folder management with PnPjs, where we’ll create, update, and delete folders dynamically inside libraries.