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)
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!
This blog is part of SharePoint Week. Find more here.
About the Author:
Blogger | SharePoint Developer | Open source contributor
Reference:
Prajapati, C. (2022). Working With SharePoint List Item Attachments Using PnP JS In SPFx. Available at: https://www.c-sharpcorner.com/blogs/working-with-sharepoint-list-item-attachments-using-pnp-js-in-spfx [Accessed: 10th May 2022].
