OneDrive file picker in Angular

Microsoft OneDrive is an online storage service where you can keep your files and personal data. This data is secure and accessible across all your devices. Similarly, SharePoint is a shared storage platform for your team, company or division.

Both onedrive and sharepoint offer a rich set of features and make sharing documents between users seamless.

File Picker javascript SDK allow to use the same functionality used within the Microsoft Onedrive service. We don’t need to develop any frontend just import the SDK and your project is ready to pick files from Onedrive.

In this tutorial, We will discuss how you can integrate file picker SDK in your angular project.

TLDR; Refer this Github repo for complete example:

GitHub - shivamarora1/onedrive-angular: Microsoft personal one drive and share point integration…

Make sure you have set up your angular projects properly.

Setup AAD account

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

2. Under authentication, create a new Single-page application registry

3. Set the redirect uri to https://localhost:4200

Ensure both Access tokens and ID tokens are checked

4. Under API permissions

• Add Files.Read.All, Sites.Read.All, Leave User.Read for Graph delegated permissions
• Add AllSites.Read, MyFiles.Read for SharePoint delegated permissions

Permissions

The file picker always operates using delegated permissions and as such can only ever access file and folders to which the current user already has access. At a minimum you must request the MyFiles.Read permission to read files from a user’s OneDrive and SharePoint sites.

Integrate file picker

1. There is a package in lib/sdk-pnptimeline which wraps settings, events and behaviours that interacts with file picker. It provides a reusable way to use it across different solutions.

Build that package before we can use it in our project.

cd sdk-pnptimeline
npm install
npm build

2. Import the required dependencies from built package.

import {
    Picker,
    MSALAuthenticate,
    LogNotifications,
    IFilePickerOptions,
    IPicker,
    Popup,
} from "@pnp/picker-api";

3. Set up microsoft authentication library parameters.

const msalParams = {
    auth: {
        authority: "{client id authority}",
        clientId: "{client id}",
        redirectUri: windows.location.origin,
    },
}

4. Set up the picker param. Refer here for more information.

const pickerInitParams = {
    // represents the set of init params as discussed in the main docs article
}

5. Configure picker desire behaviours. Here we are using Popup() and MSALAuthenticate().

Popup() will render file picker in new pop up and MsalAuthenticate will use app config and microsoft authenticate library to authenticate user.

const picker = Picker(window.open("", "Picker", "width=800,height=600")).using(
    Popup(),
    LogNotifications(),
    MSALAuthenticate(msalParams),
);

6. Activate picker with your base url. In share point it would in this format https://tenant.sharepoint.com/sites/dev and in case of one drive it would be https://onedrive.live.com/picker

const results = await picker.activate({
    baseUrl: "https://tenant.sharepoint.com/sites/dev",
    options: pickerInitParams,
});