WP08 – DragDropFiles Control Demo for SharePoint Framework

Introduction

What is SharePoint Framework (SPFx)?

The SharePoint Framework (SPFx) is Microsoft’s modern development model for extending SharePoint Online and Microsoft 365. It allows developers to build client-side solutions using modern web technologies such as TypeScript, React, Fluent UI, and Microsoft Graph.

SPFx solutions run directly in the browser and integrate seamlessly with SharePoint pages, Teams applications, Viva Connections dashboards, and Microsoft 365 experiences.

Because SPFx is based on modern web standards, it has become the preferred approach for developing custom web parts and extensions in Microsoft 365 environments.

Why use PnP SPFx React Controls?

The PnP SPFx React Controls library provides a collection of reusable React controls built specifically for SharePoint Framework projects.

Instead of developing complex UI components from scratch, developers can leverage tested and community-supported controls that accelerate development and improve user experience.

Benefits include:

• Faster development
• Consistent user experience
• Community support
• SharePoint integration
• Fluent UI compatibility
• Reduced maintenance effort

What is the DragDropFiles Control?

The DragDropFiles control provides a simple and user-friendly drag-and-drop file upload area.

Rather than implementing native browser drag-and-drop functionality manually, developers can use this control to:

• Accept file drops
• Handle multiple files
• Provide visual feedback
• Capture file metadata
• Start custom upload processes

Typical scenarios include:

• Document uploads
• Image uploads
• CSV imports
• Excel imports
• Custom file processing
• SharePoint library uploads

Official documentation:

Solution Overview

This demonstration web part creates a drag-and-drop upload zone where users can drop one or more files.

When files are dropped:

1. The control captures the file collection.
2. The event handler executes.
3. File information is displayed in the browser console.
4. Additional upload or validation logic can be implemented.

Prerequisites

Before starting, ensure that:

• Node.js is installed
• SPFx environment is configured
• Yeoman generator is installed
• PnP SPFx React Controls package is installed

Creating the Web Part

yo @microsoft/sharepoint

Generator answers:

Which type of client-side component to create?
WebPart
What is your Web part name?
DragDropFilesDemo
What is your Web part description?
PnP DragDropFiles Control Demo

Install the PnP controls:

npm install @pnp/spfx-controls-react --save

Install dependencies:

npm install

Run the solution:

heft build
heft serve

Component Source Code

DragDropFilesDemo.tsx

import * as React from 'react';
import { Text } from '@fluentui/react';
import {
  DragDropFiles
} from '@pnp/spfx-controls-react/lib/DragDropFiles';
import { IDragDropFilesDemoProps } from './IDragDropFilesDemoProps';
export const DragDropFilesDemo: React.FC<IDragDropFilesDemoProps> = () => {
  const _getDropFiles = (files:any) => {
    for (var i = 0; i < files.length; i++) {
      console.log("Filename: " + files[i].name);
      console.log("Path: " + files[i].fullPath);
    }
  }
  return (
     <DragDropFiles 
          dropEffect="copy" 
          enable={true}  
          onDrop={_getDropFiles}
          iconName="Upload"
          labelMessage="My custom upload File"
          >
          Drag and drop here...
     </DragDropFiles>
  );
};
export default DragDropFilesDemo;

Code Walkthrough

Importing the Control

The DragDropFiles control is imported from the PnP SPFx React Controls library.

import {
  DragDropFiles
} from '@pnp/spfx-controls-react/lib/DragDropFiles';

This gives the web part access to the ready-made drag-and-drop component.

File Drop Event Handler

The event handler receives the collection of dropped files.

const _getDropFiles = (files:any) => {

The parameter contains the files dropped by the user.

The code loops through every file:

for (var i = 0; i < files.length; i++) {

For each file, the example displays:

console.log("Filename: " + files[i].name);
console.log("Path: " + files[i].fullPath);

This information can later be used for:

• Validation
• Upload operations
• Metadata extraction
• Custom processing

Configuring the Control

Drop Effect

dropEffect="copy"

Specifies that the dragged files will be copied rather than moved.

Enable Property

enable={true}

Enables the drag-and-drop area.

Upload Icon

iconName="Upload"

Displays the Fluent UI Upload icon.

Custom Message

labelMessage="My custom upload File"

Defines the text displayed in the upload area.

Drop Event

onDrop={_getDropFiles}

Associates the control with the custom event handler.

Execution Flow

User drags files
        ↓
DragDropFiles receives files
        ↓
onDrop event fires
        ↓
_getDropFiles executes
        ↓
Loop through files
        ↓
Display file information
        ↓
Custom processing can begin

Expected Result

After deploying the web part:

A drag-and-drop zone appears on the page.

My custom upload File
Drag and drop here...

When files are dropped:

Filename: document.pdf
Path: document.pdf
Filename: image.png
Path: image.png

The information appears in the browser Developer Tools console.

Possible Enhancements

This sample focuses only on file capture.

Future improvements could include:

• Uploading to SharePoint libraries
• File extension validation
• File size validation
• Upload progress indicators
• Image previews
• CSV parsing
• Excel processing
• Integration with PnPJS
• Microsoft Graph uploads

Lessons Learned

The DragDropFiles control significantly reduces the amount of code required to implement drag-and-drop functionality inside SharePoint Framework solutions.

Without the control, developers would need to manually handle:

• DragEnter events
• DragLeave events
• Drop events
• Browser compatibility
• Visual feedback

Using the PnP control allows developers to focus on business requirements rather than low-level browser implementation details.

Official Documentation

Documentation for the DragDropFiles control:

PnP SPFx React Controls:

Roadmap Progress

Progress: 8 / 76 controls completed. 🚀