Working With SharePoint List Item Attachments Using PnP JS In SPFx

In this article, we will see how to get, add, delete SharePoint list item attachments using PnP Js in SPFx.

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!