React File Picker

This project provides a React component for integrating the OneDrive/SharePoint file picker into your application. It uses the @pnp/core library to handle communication with the picker and @azure/msal-browser for authentication.

Getting Started

To get started with this project, you will need to have Node.js and npm installed on your machine. You can then install the project dependencies by running the following command in the project directory:

npm install

Running the Project

To run the project, you can use the following command:

npm run dev

This will start the development server and open the application in your default browser. You can then use the file picker component in your application.

Building the Project

To build the project for production, you can use the following command:

npm run build

This will create a production-ready build of the project in the dist directory.

Using the File Picker Component in Development

To use in development, you can use npm link:

# In this project directory
npm link

# In your project directory
npm link onedrive-filepicker

Using the File Picker Component in Production

You can add this project as follows:

npm install onedrive-filepicker

Inside your project, you need to replicate the example shown in src/App.tsx.

Publishing to NPM

1. Bump the version in package.json (follow semver):

   npm version patch   # 0.0.3 → 0.0.4 (bug fixes)
   npm version minor   # 0.0.3 → 0.1.0 (new features)
   npm version major   # 0.0.3 → 1.0.0 (breaking changes)

2. Build the package:

   npm run build

3. Log in to npm (only needed once per machine):

   npm login

4. Publish:

   npm publish --access public

The published package is available at https://www.npmjs.com/package/@snapif/onedrive-filepicker.

Registering with Microsoft

See: OneDrive File Picker Required Setup Docs

To use the file picker, you will need to register your application with Microsoft Azure.

1. Go to the Microsoft Azure portal and sign in with a Microsoft account.

2. Under Azure services, click on App registrations.

3. Click on the New registration to create a new registration.

4. Register an application

   1. Provide an appropriate user-facing display name.
   2. Choose the accounts types that can use the application (select Any Entra ID Tenant + Personal Microsoft accounts for all OneDrive and SharePoint account).
   3. You can leave Redirect URI empty as it will be set in the next step.

   

5. Register the application and then, under Manage > Authentication (Preview), set your redirect URIs that will be used during user login.

   1. Click the Add Redirect URI button.
   2. Select Single-page application
   3. Set the redirect URI. For the example in this repository, use https://localhost:5173. Ensure you also add your production redirect URL.
   4. Ensure both Access tokens and ID tokens are checked

   

6. Under Manage > API permissions, add the appropriate delegated permissions.

   1. Add the Microsoft Graph delegated permissions Files.Read.All and Sites.Read.All for read-only access or Files.ReadWrite.All and Sites.ReadWrite.All for read/write access. Make sure to leave User.Read for Graph delegated permissions
   2. Add the SharePoint delegated permissions AllSites.Read and MyFiles.Read for read-only access or AllSites.Write and MyFiles.Write for read/write access.

Note: When connecting to OneDrive Personal, you will also need to request the OneDrive.ReadWrite scope, which corresponds to Files.ReadWrite.All or Files.ReadWrite.