How can I retrieve a SharePoint list items attachments using spfx?

Question

I've managed to figure out how to submit multiple attachments to a sharepoint list item. I now need to retrieve the item and display these items in the same form that was submitted.

Here's the submit code:

private _onSubmit() {
    this.setState({
      FormStatus: 'Submitted',
      SubmittedLblVis: true,

    }, () => {

      pnp.sp.web.lists.getByTitle("My List").items.add({

        State: this.state.State,
        State1: this.state.State1,

      }).then((iar: ItemAddResult) => {
        var attachments: AttachmentFileInfo[] = [];

        attachments.push({
          name: this.state.FileUpload[0].name,
          content: this.state.FileUpload[0]

        });

        attachments.push({
          name: this.state.FileUpload2[0].name,
          content: this.state.FileUpload2[0]
        });

        attachments.push({
          name: this.state.FileUpload3[0].name,
          content: this.state.FileUpload3[0]
        });

    iar.item.attachmentFiles.addMultiple(attachments);

This works great.

I have a button the form that allows the user to read an item and populate all the fields in the form. This works fine. But it's not working for the attachments. First thing is I don't know what the Attachments column is called!

Here's the retrieval function:

private _editItem = (ev: React.MouseEvent<HTMLElement>) => {
    const sid = Number(ev.currentTarget.id);
    let _item = this.state.Items.filter((item) => { return item.Id === sid; });
    if (_item && _item.length > 0) {
      this._getListItems();
      this.setState({
        State etc...with a few examples

        FormStatus: _item[0].FormStatus, 

        showModal: true

        //The below callback function 
      }, () => {

        if (_item[0].PanelMember) {
          this.PanelMemberGetPeoplePicker(Number(_item[0].PanelMemberId));
        }

      });
    }
  }

And the _getListItems() function within the above:

 public _getListItems() {
    sp.web.lists.getByTitle("MyList").items.get().then((items: any[]) => {
      let returnedItems: MyDataModel[] = items.map((item) => { return new MyDataModel(item); });

      this.setState({ Items: returnedItems });
    });
  }

I understand that I'll have to update the MyDataModel interface with whatever the attachment column is but what is the attachment column? And how would I implement it within the above to retrieve all 3 attached documents?

Lee_MSFT Lee_MSFT · Accepted Answer · 2020-01-27T03:25:46

Get the item first, then get item attachment files.

let item=sp.web.lists.getByTitle("TestList").items.getById(13);
    item.attachmentFiles.get().then((files)=>{
      console.log(files);
    })

How can I retrieve a SharePoint list items attachments using spfx?

1 Answers