Introduction

In this article, we will see how to get, add, delete SharePoint list item attachments using PnP Js in SPFx. So let's see the step-by-step implementation.

Implementation

For testing purposes, we will use SP Editor Extension which is a very cool and great extension to test PnP js queries. After adding an extension to chrome you can see the SharePoint tab in developer tools and we will run a query in PnPjs Console.

  • Create a SharePoint list.
  • Open a developer tool (F12) > Go to the SharePoint tab > Open PnPjs Console

Get all list item attachments

import { sp } from "@pnp/sp/presets/all";
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from "@pnp/sp/items/types";

(async () => {
  // get list item by id
  const item: IItem = sp.web.lists.getByTitle("React").items.getById(2);
  // get all attachments
  const attachments: IAttachmentInfo[] = await item.attachmentFiles();
  console.table(attachments);
})().catch(console.log)

Output

Get list item attachment by filename

import { sp } from "@pnp/sp/presets/all";
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from "@pnp/sp/items/types";

(async () => {
  // get list item by id
  const item: IItem = sp.web.lists.getByTitle("React").items.getById(2);
  // get an attachment by file name
  const attachment: IAttachmentInfo[] = await item.attachmentFiles.getByName("DynamicForm1207.txt")();
  console.table(attachment);
})().catch(console.log)

Output

Add an Attachment

import { sp } from "@pnp/sp/presets/all";
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from "@pnp/sp/items/types";

(async () => {
  // get list item by id
  const item: IItem = sp.web.lists.getByTitle("React").items.getById(2);
  // add an attachment
  await item.attachmentFiles.add("TestFile.txt", "This is test file");
  console.log("Attachment added");

})().catch(console.log)

Output

Add Multiple Attachments

import { sp } from "@pnp/sp/presets/all";
import { IList } from "@pnp/sp/lists";
import { IAttachmentFileInfo } from "@pnp/sp/attachments";

(async () => {
   const list: IList = sp.web.lists.getByTitle("React");

  let files: IAttachmentFileInfo[] = [];

  files.push({
    name: "Test file 1",
    content: "Test file 1 content"
  });

  files.push({
    name: "Test file 2",
    content: "Test file 2 content"
  });

  await list.items.getById(2).attachmentFiles.addMultiple(files);
  console.log("Multiple attachments added");

})().catch(console.log)

Output

Delete an attachment

import { sp } from "@pnp/sp/presets/all";
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from "@pnp/sp/items/types";

(async () => {
  // get list item by id
  const item: IItem = sp.web.lists.getByTitle("React").items.getById(2);
  // delete an attachment
  await item.attachmentFiles.getByName("DynamicForm1207.txt").delete();
  console.log("Attachment deleted");
})().catch(console.log)

Output

Delete multiple attachments

import { sp } from "@pnp/sp/presets/all";
import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from "@pnp/sp/items/types";

(async () => {
  // get list item by id
  const item: IItem = sp.web.lists.getByTitle("React").items.getById(2);
  // delete multiple attachment
  await item.attachmentFiles.deleteMultiple("my-emails.sppkg","my-tasks.sppkg");
  console.log("Attachments deleted");
})().catch(console.log)

Output

Summary

In this article, we have seen how to get, add, delete SharePoint list item attachments using PnP Js.

Hope this helps!

Sharing is caring!