npm package: @snapif/onedrive-filepicker
Description: 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.
Latest version: 0.1.1

# 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:

```bash
npm install
```

## Running the Project

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

```bash
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:

```bash
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:

```bash
# 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:

```bash
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](https://semver.org/)):
   ```shell
   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:
   ```shell
   npm run build
   ```

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

4. Publish:
   ```shell
   npm publish --access public
   ```

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

## Registering with Microsoft

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

You will need to create an AAD application. This is the application used to obtain tokens for accessing files.
You can follow these steps:

1. Create a new AAD App Registration and note the application ID

   ![App Registration](docs/app-registrations.png)
   ![App Registration Detail](docs/app-registrations-detail.png)

2. Under **Authentication**, create a new Single-page application registry
   1. Set the redirect URI to `https://localhost:5173` (for local testing; you also need to add your production URL)
   2. Ensure both **Access tokens** and **ID tokens** are checked
   3. Optionally, configure the application for multitenant access as shown below

       ![Redirect URIs](docs/redirect-uris.png)
       ![Flows and Multitenant](docs/flows-and-multitenant.png)

3. Under **API permissions**, add the following delegated permissions:
   1. Add `Files.Read.All`, `Sites.Read.All`, Leave `User.Read` for Graph delegated permissions
   2. Add `AllSites.Read`, `MyFiles.Read` for SharePoint delegated permissions

![API Permissions](docs/permissions.png)

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