Working With SharePoint List Item Attachments Using PnP JS In SPFx

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)

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)

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!