Introduction

Hi everyone, this is part 14 of PnP React Controls Series. This post will explain the usage of the PnP DragDropFiles 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 would like the end user to upload a bunch of files from the local to the SharePoint. Using this control will make it easy for the developers to implement the fileupload. Although this control provides a very minimal set of properties but it provides all the mandatory features except the file filter. I had also published a post on React-Dropbox control on how to use it in the SPFx project. You can view the blog post link in the reference section.

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 dragDropFilesDemo. Below is the DragDropFilesDemo.tsx file.

import * as React from 'react';
import { FC } from 'react';
import styles from './DragDropFilesDemo.module.scss';
import { IDragDropFilesDemoProps } from './IDragDropFilesDemoProps';
import { DragDropFiles } from "@pnp/spfx-controls-react/lib/DragDropFiles";

const DragDropFilesDemo: FC<IDragDropFilesDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;
    const [selFiles, setSelFiles] = React.useState<any[]>(undefined);

    const _getDropFiles = (files) => {
        setSelFiles(files);
        for (var i = 0; i < files.length; i++) {
            console.log("File Info: ", files[i]);
        }
    }

    return (
        <section className={`${styles.dragDropFilesDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <div className={styles.welcome}>
                <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
            </div>
            <div>
                <h3>Drag & Drop Files Demo</h3>
                <DragDropFiles
                    dropEffect="copy"
                    enable={true}
                    onDrop={_getDropFiles}
                    iconName="Upload"
                    labelMessage="My custom upload File"
                >
                    <div className={styles.divDropArea}>
                        Drag & Drop the files
                    </div>
                </DragDropFiles>
                <p><b>Dropped Files:</b></p>
                {selFiles && selFiles.length > 0 &&
                    <ul>
                        {selFiles.map((file) => {
                            return (
                                <li>{file.name}</li>
                            )
                        })}
                    </ul>
                }
            </div>
        </section>
    );
};

export default DragDropFilesDemo

Below are the updates done to the file.

• Changed the class component to the react hooks
• Created a state variables to hold the filenames that are dropped in the dragdrop section.
• Following are some of the properties of the control that allows us to customize based on our requirement
  • dropEffect – Feedback label to be displayed when dragging the files to the dragdrop section.
  • enable – option to enable or disable the control.
  • labelMessage – Message to be displayed on the dragdrop section while dragging the files to drop.
  • onDrop – Method executed when the files are dropped on the dragdrop section
  • iconName – Icon to be displayed while dropping the files.

Reference URL

DragDropFiles – @pnp/spfx-controls-react

SPFx – Uploading files using react-dropzone

Sample Implementation

Conclussion

I hope you had learned something about one of the pnp control. There are lot to come in future.

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…