Introduction

Hi friends, its been a long time since I posted. In this post, we are going to learn the usage of PnP ListItemAttachment control. We will see how we can leverage this control on our SPFx projects and make use of the feature provided by this control. Thanks to the community.

About the Control

This control could be very useful when you have the functionality of using the list item attachments concept and also if you would like the end user to upload the files. There are some pros and cons of using this control and let us see both below.

Pros

1. Readily available control to display the item attachments in a modern design
2. Configuration is very minimal which makes the devs to configure and use it within minutes
3. Nice UI for the files with file type icons
4. Option to add and delete the attachments are available by default

Cons

1. Configuration expects the List ID, Current Context and Item ID as a mandatory properties. If the Item ID is not configured then considered as a new item attachments
2. Cannot add custom validation for the files like the below.
   • Restrict based on the number of files to be allowed
   • Restrict based on the file size
3. Only one file can be selected at a time and no multi file selection
4. The moment you choose the file, its automatically added as an attachment and there is bulk add support.

Focus on the Code

You can refer Part 1 post on the creation of the SPFx project and installing all the dependencies. In addition to the dependencies mentioned in that post you have to install @pnp/sp – v3.5.1. You should also do some changes to the project files to make the pnpjs version 3 to work on SPFx 1.14.0. Please follow this link to do the changes.

Created a webpart named listItemAttachmentDemo. Below is the ListItemAttachmentDemo.tsx file.

import * as React from 'react';
import { useEffect, useState } from 'react';
import styles from './ListItemAttachmentDemo.module.scss';
import { IListItemAttachmentDemoProps } from './IListItemAttachmentDemoProps';
import { ListItemAttachments } from '@pnp/spfx-controls-react/lib/ListItemAttachments';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

const ListItemAttachmentDemo: React.FC<IListItemAttachmentDemoProps> = (props) => {
    const [loading, setLoading] = useState<boolean>(true);
    const [item, setItem] = useState<any>(undefined);

    const {
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;

    useEffect(() => {
        (async () => {
            let listItem: any = await props.sp.web.lists.getById('8a698bcf-9ec5-4ba9-9b80-b0c8507eb762')
                .items.getById(1).select('Title')();
            setItem(listItem);
            setLoading(false);
        })();
    }, []);

    return (
        <section className={`${styles.listItemAttachmentDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <div>
                {loading ? (
                    <div>loading...</div>
                ) : (
                    <>
                        {item &&
                            <>
                                <div>
                                    <span style={{ fontWeight: 'bold' }}>Title: </span>{item.Title}
                                </div>
                                <ListItemAttachments listId='8a698bcf-9ec5-4ba9-9b80-b0c8507eb762'
                                    itemId={1}
                                    context={props.context as any}
                                    disabled={false} />
                            </>
                        }
                    </>
                )}
            </div>
        </section>
    );
};

export default ListItemAttachmentDemo;

Below are the updates done to the file.

1. Changed the class component to use react hooks
2. Created a state variables to display the loading and also the listitem metadata like the ‘Title‘
3. Following are some of the most commonly used properties
   • listID – GUID of the list where the attachments has to be added or from where it has to be populated
   • context – Current context to call the web api to load and add the attachments.
   • itemID – ID of the item where the attachments has to be mapped.
   • disabled – Enable or disable the control

Reference URL

ListItemAttachments – @pnp/spfx-controls-react

Sample Implementation

Conclussion

I hope you had learned something about one of the PnP controls. Still a lot to come in future. Stay tuned.

Please free to post your comments and let me know if you want me to post article on any particular feature or plugins that relates to SharePoint. Thanks for your support.

sudharsank/pnpcontrols-demo: Demo project on different PnP React Controls. (github.com)

Happy Coding…