Simple Drag and Drop Files Upload Zone in SPFx

This article provides steps to implement a drag-and-drop file upload zone in the SharePoint Framework (SPFx) web part.
It uses the React Dropzone library for modern drag-and-drop behavior and PnP JS to handle file uploads to a SharePoint document library.

⚙️ Install Required Dependencies

npm install @pnp/sp --save
npm install react-dropzone --save
npm install filepond --save
npm install filepond-plugin-image-exif-orientation --save
npm install filepond-plugin-image-preview --save

These commands install:

PnP JS → for interacting with SharePoint.
React Dropzone → to implement drag-and-drop file uploads.
FilePond plugins → for image previews and orientation handling.

🧩 Configure Component State

Create a new file in src/webparts/<yourWebPartName>/components called ISpfxReactDropzoneState.ts:

export interface ISpfxReactDropzoneState {
  files: any[];
}

This interface defines a state variable files, which stores the files selected by the user.

⚛️ Implement the React Component

`SpfxReactDropzone.tsx`

import * as React from 'react';
import styles from './SpfxReactDropzone.module.scss';
import { ISpfxReactDropzoneProps } from './ISpfxReactDropzoneProps';
import { ISpfxReactDropzoneState } from './ISpfxReactDropzoneState';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { sp } from '@pnp/sp/presets/all';
import * as FilePond from 'filepond';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

FilePond.registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);

export default class SpfxReactDropzone extends React.Component<ISpfxReactDropzoneProps, ISpfxReactDropzoneState> {
  constructor(props: ISpfxReactDropzoneProps) {
    super(props);
    this.state = { files: [] };
  }

  public render(): React.ReactElement<ISpfxReactDropzoneProps> {
    return (
      <div className={styles.spfxReactDropzone}>
        <h2>{this.props.description}</h2>
        <input
          type="file"
          multiple
          onChange={(e) =>
            this.setState({ files: Array.from(e.target.files || []) })
          }
        />
        <ul>
          {this.state.files.map((file, i) => (
            <li key={i}>{file.name}</li>
          ))}
        </ul>
        <PrimaryButton text="Upload" onClick={this._uploadFiles} />
      </div>
    );
  }

  private _uploadFiles = async (): Promise<void> => {
    const folderUrl = "/sites/TheLanding"; // change this path as per your site
    for (const file of this.state.files) {
      await sp.web.getFolderByServerRelativeUrl(folderUrl).files.add(file.name, file, true);
    }
    alert('Files uploaded successfully!');
    this.setState({ files: [] });
  };
}

💡 Explanation

The component displays a file input allowing users to select multiple files.
Selected files are stored in the React component’s state.
Clicking the Upload button uploads files to the SharePoint document library using PnP JS.

🧠 FilePond Integration (Optional Enhancement)

If you want a more polished drag-and-drop UI, replace the <input> control with FilePond configuration:

<FilePond
  allowMultiple={true}
  files={this.state.files}
  onupdatefiles={(fileItems) =>
    this.setState({ files: fileItems.map(fileItem => fileItem.file) })
  }
/>

This gives a modern preview experience with progress bars and image thumbnails.

🚀 Deploy the Solution

Run the following build commands:

gulp build
gulp bundle --ship
gulp package-solution --ship

Then upload the .sppkg file to your App Catalog and deploy the solution.

Once deployed, you can add the web part to any SharePoint page and start uploading files instantly.

📂 GitHub Source

View full SPFx project on GitHub:Simple Drag and Drop Files Upload Zone in SPFx

GitHub

✅ Summary

This example demonstrates how to combine React Dropzone, FilePond, and PnP JS to create a smooth drag-and-drop upload experience in SharePoint.
It’s lightweight, user-friendly, and works seamlessly across modern browsers.