SPFX: How to add item in SharePoint list with attachment?

Question

I have created a SPFX webpart to add item in list with attachment.

How to add item with attachment ?

Answer 1

Ronak,

Working with attachments can be frustrating, but I have found that using the awesome PnP library makes it easy. Here's a quick summary of how to do it:

1. Install the sp-pnp-js library by using npm:

   npm I sp-pnp-js --save

2. In your code, import sp-pnp-js, and refer to Web, List, and ItemAddResult

   import { Web, List, ItemAddResult } from "sp-pnp-js/lib/pnp";

3. In you web part, wherever you want to create the item and add the attachment, get a reference to the current web site:

   const web: Web = new Web(this.context.pageContext.web.absoluteUrl);

(if you're doing it from a component, you'll probably want to us this.props.context or something similar, depending on how you pass the web part context) 4. Using the web object, create the item. The item creation result will have two properties: "data" and "item". "data" is what SharePoint returns after the add operation, while "item" is the item object from a REST call. It is as if you had added the item, and fetched the item. Just chain the add and add attachment calls together:

web.lists.getByTitle("MyList").items.add({
        Title: "My List Item"
    }).then(r => {
        console.log(r);

        // this will add an attachment to the item we just created
        r.item.attachmentFiles.add("file.txt", "Here is some file content.");
    });

The item.attachmentFiles.add method can take a regular string, a blob, or an array buffer.

For multiple attachments, just push attachments into the array of attachments:

var attachments: AttachmentFileInfo[] = [];

attachments.push({
    name: "First file",
    content: "All your bases are belong to us"
});

attachments.push({
    name: "Second file",
    content: data //a byte array you loaded earlier
});

r.item.attachmentFiles.addMultiple(attachments);

And if you want to retrieve the item id to refer to it in code, just grab it from the result of the add operation, before you add attachments:

web.lists.getByTitle("MyList").items.add({
    Title: "My List Item"
}).then((r: ItemAddResult) => {
    console.log("item id is:", r.data.Id);

    // I suppose you could use r.item.Id as well

Of course, you can do all of the above without the PnP library, but why write your own code when you can use a tested library.

If you need help loading the attachment's data, or if you'd prefer not to use the PnP library, let me know and I'll post an example.

I hope this help.

Edit:

Also look at this: SP PnP CRUD Operations