Skip to content

ListItemAttachments control

This control allows you to manage list item attachments, you can add or delete associated attachments. The attachments are listed in tile view.

Here is an example of the control:

ListItemAttachments Upload

ListItemAttachments Tiles

ListItemAttachments Confirm Delete

ListItemAttachments Attachment Deleted

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the control into your component:
import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
  • Use the ListItemAttachments control in your code as follows:
<ListItemAttachments listId='dfa283f4-5faf-4d54-b6b8-5bcaf2725af5'
                     disabled={false} />
  • If You want to use ListItemAttachments controls with new form You have to use React.createRef.

Following example will add selected attachments to list item with id = 1

let listItemAttachmentsComponentReference = React.createRef<ListItemAttachments>();
        itemId={0} />
<PrimaryButton text="Save to Item with id 1" onClick={()=>{
      }} />


The ListItemAttachments control can be configured with the following properties:

Property Type Required Description
context BaseComponentContext yes SPFx web part or extention context
itemId number no List Item Id
listId string yes Guid of the list.
webUrl string no URL of the site. By default it uses the current site URL.
label string no Main text to display on the placeholder, next to the icon.
description string no Description text to display on the placeholder, below the main text and icon.
disabled boolean no Specifies if the control is disabled or not.
openAttachmentsInNewWindow boolean no Specifies if the attachment should be openend in a separate browser tab. Use this property set to true if you plan to use the component in Microsoft Teams.