onedrive/samples

Contains samples, scenarios, and guidance for integrating with OneDrive and SharePoint drives, drive items, and files.

samples's Issues

Rate limit headers are not coming for app registered in SharePoint

Describe the bug
I have registered SharePoint app directly in SharePoint site (not as Azure AD app) using the pages appnegnew.aspx and appinv.aspx. I noticed that if I get the token for this app using following code rate limit headers are not coming up. But if register the app in Azure AD and use the following code rate limit headers are coming up. Please help to confirm if this the expected behavior or not.
var clientId = "";
var clientSecret = "";
var siteUrl = "";

PnP.Framework.AuthenticationManager authManager = new PnP.Framework.AuthenticationManager();
var sharePointAccessToken = authManager.GetACSAppOnlyContext(siteUrl, clientId, clientSecret).GetAccessToken();

To Reproduce
Steps to reproduce the behavior:
Register the app directly in SharePoint site and not in Azure AD and use the above code.

Example using Picker v8 with personal Microsoft accounts

Is there an example of using OneDrive Picker v8 with personal Microsoft accounts? All the examples I can see use business accounts.

When the picker v8.0 supports shared tab?

Hello teams.
The picker doesn't show the shared file.
but the OneDrive website can list shared files. there are some confuses.
or do we have a roadmap about the Content Picker?

File Picker 8.0 is not working in iframe, contrary to the statement in the documentation.

Category

• Question
• Documentation issue
• Bug

Expected or Desired Behavior

According to the documentation here, File Picker 8.0 supports being hosted in an iframe. The sentence goes "The page can be hosted either embedded in an iframe or as a popup."

Observed Behavior

When being attached into the frame, the picker refuses to connect and throws out this error:
Refused to frame 'https://{{company}}-my.sharepoint.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' teams.microsoft.com *.teams.microsoft.com *.skype.com *.teams.microsoft.us local.teams.office.com *.powerapps.com *.yammer.com *.officeapps.live.com *.office.com *.stream.azure-test.net *.microsoftstream.com *.dynamics.com *.microsoft.com".

Is it possible to embed this picker in an iframe in a non-Microsoft website?

Thank you.

[ ]: http://aka.ms/onedrive-api-issues
[x]: http://aka.ms/onedrive-api-issues

SharePoint CSOM rate limit code is slow with .net frame work console application and rate limit headers are not appearing in .net framework console application

Describe the bug
Sample code of SharePoint CSOM rate limit is working fine with .net 7 console application (completing 700+ csom requests with 5 threads) and it is slow in .net framework application (completing 200+ csom requests with 5 threads). Also rete limit headers are not appearing in .net framework console app. So please help to get clarification for this issue.

To Reproduce
Steps to reproduce the behavior: Add the code in the project (samples-master\scenarios\throttling-ratelimit-handling\RateLimitDemo) to .net framework console application

Expected behavior
Rate limit headers are not appearing when rate limit sample code is added to .net framework console application. If this is the expected behavior please suggest work around solution for this.

Screenshots
.net 7 console app

.net framework console app

OneDrive File Picker v8 - Missing code example and documentation for handling shared libraries

Describe the bug
There is missing code example and documentation for handling shared libraries. It is complex to make it work. Making javascript-basic example to work with shared libraries requires not obvious adjustments:

1. Configuration, set sharedLibraries: true (it is obvious, it's described in documentation, it's OK)
2. Adjusting code for getting token (auth.js->getToken) - it's not covered by documentation or any example (there is some handling in csharp-basic but at the same time pivots->sharedLibraries is not set to true).
   

Expected behavior
There should be code example for sharedLibraries:true (the best would be some basic javascript code). It should be also covered clearly by documentation how to make shared libraries to work.

OneDrive FilePicker doesn't show anything in Photos

Not sure if this is a bug or feature request. Good news: after many days of effort, I got my asp net core web app up and running with PickerV8. (I had been using the previous version for years.) I'm able to run locally and deploy to App Service or Container Apps and everything works in all three environments (local, app service, container apps).

I only use OneDrive FilePicker against personal accounts and do nothing with SharePoint.

My question is when I put what I think are correct params conf to allow picking from "photos", nothing happens, meaning I don't see anything (see screenshot below). Can I use "photos: true"? Is that valid syntax in my situation? I have this:

   const params = {
        sdk: "8.0",
        entry: {
            oneDrive: {
                files: {},
            }
        },
        authentication: {},
        messaging: {
            origin: "http://localhost:3000",
            channelId: "27"
        },
        search: true,
        typesAndSources: {
            mode: "all",
            pivots: {
                oneDrive: true,
                photos: true,
                sharedLibraries: true,
                recent: true,
            },
        },
        selection: {
            mode: "multiple"
        },
    };

I'm expecting to see photos in the image below because when I go to OneDrive there are photos there.

Selecting from File Picker search results fails when using VPN

Hey guys,
we applied the feature related to the issue #20. Many thanks for considering my request. The feature is really good.

But we realized that when a VPN is used to connect to SharePoint, navigating to a folder and selecting an item works fine. However, the Select button does not work when you search for an item and select it from the search results. The Select button greys out with a spinning icon for a few seconds and then displays again, but nothing happens. The item is not selected. When a VPN is NOT used, selecting an item from the search results works successfully.

Any suggestions on how to solve this problem?

Problem-related to the issue #20

Basic JS Sample not working with https://xxxx.sharepoint.com and https://xxx-my.sharepoint.com at the same time

Hi guys,
We are using the basic javascript samples provided, but we have the same problem described in ticket 7

We aim to make it possible for the user to select files/folders from both places (Recent, My Files, QuickAccess-Sharepoint). But it looks like we need to manage different tokens. Right now, as a workaround, we have two starting point URLs.

• https://wdxxxxxxxxt-my.sharepoint.com/_layouts/15/FilePicker.aspx?
• https://wdxxxxxxxxt-sharepoint.com/_layouts/15/FilePicker.aspx

Some of you can help us to make the basic javascript sample works with both scenarios? I'm not sure if @patrick-rodgers already spoke with the team about it.

Historical information from [ticket 7]
Glad you got it working, we'll have to review the demo code and see what might be wrong there. Thanks!
Originally posted by @patrick-rodgers in #7 (comment)

Thanks in advance, the feature is really helpful.

Recent tab is showing the incorrect file name

Describe the bug
When using the OneDrive File Picker, the files which are displayed in the Recent tab are using the wrong file name in certain cases.

To Reproduce

• Open the OneDrive File Picker in the Recent tab
• Identify a docx file already in the Recent tab which is hosted in a SharePoint document library
• Navigate to that file in the document library
• If the file does not have the Title property set then set the value to something like: test
• Now rename the file in the document library (eg. append a '1' to the file name)
• Wait for 1 - 5 minutes. Not sure how long it takes for this change to propagate to the ODFP
• Open the OneDrive File Picker in the Recent tab again
• Notice that the name of the file is now test.docx

Expected behavior
After changing the name of the file, I would expect the new file name to be displayed in the Recent tab (not the file title with .docx at the end).

Screenshots

Details
This seems to happen only after the filename has been changed and the file has the Title property set. If the Title property is not set, then the new filename appears correctly in the Recent tab.

This bug does not occur when you locate the file from the Quick access tab - Only in the Recent tab

OneDrive and SharePoint File Picker v8 Issue - 500 Internal Server Error

We are integrating SharePoint file picker v8 using the procedures outlined in the instructions here.

We're hosting the picker within an iframe. However, an issue has occurred, and the page within the iframe is not loading. The specifics are shown below.

Request -

request-id: edb256a0-c042-4000-c5d8-59f19fea2d8d
    
 curl 'https://figg.sharepoint.com/sites/Verifyit/Shared%20Documents/General/_layouts/15/FilePicker.aspx?filePicker=%7B%22sdk%22%3A%228.0%22%2C%22entry%22%3A%7B%22sharePoint%22%3A%7B%22byPath%22%3A%7B%22web%22%3A%22https%3A%2F%2Ffigg.sharepoint.com%2Fsites%2FVerifyit%2FShared%2520Documents%2FGeneral%22%7D%7D%7D%2C%22authentication%22%3A%7B%7D%2C%22messaging%22%3A%7B%22origin%22%3A%22https%3A%2F%2Fkrishna.boarddecisions.com%22%2C%22channelId%22%3A%224399e3c2-b827-4e4c-b245-92501ccae227%22%7D%2C%22typesAndSources%22%3A%7B%22mode%22%3A%22files%22%2C%22pivots%22%3A%7B%22sharedLibraries%22%3Atrue%2C%22recent%22%3Atrue%2C%22oneDrive%22%3Atrue%7D%7D%2C%22selection%22%3A%7B%22mode%22%3A%22single%22%7D%7D' \
   -H 'authority: figg.sharepoint.com' \
   -H 'cache-control: max-age=0' \
   -H 'upgrade-insecure-requests: 1' \
   -H 'origin: https://krishna.boarddecisions.com' \
   -H 'content-type: application/x-www-form-urlencoded' \
   -H 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Teams/1.5.00.17656 Chrome/85.0.4183.121 Electron/10.4.7 Safari/537.36' \
   -H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' \
   -H 'sec-fetch-site: cross-site' \
   -H 'sec-fetch-mode: navigate' \
   -H 'sec-fetch-dest: iframe' \
   -H 'accept-language: en-US' \
   --data-raw 'access_token=*******' \
   --compressed

Response -

500 INTERNAL SERVER ERROR

Picker Configuration -

{
    "sdk": "8.0",
    "entry": {
        "sharePoint": {
            "byPath": {
                "web": "https://figg.sharepoint.com/sites/Verifyit/Shared%20Documents/General"
            }
        }
    },
    "authentication": {},
    "messaging": {
        "origin": "https://krishna.boarddecisions.com",
        "channelId": "4399e3c2-b827-4e4c-b245-92501ccae227"
    },
    "typesAndSources": {
        "mode": "files",
        "pivots": {
            "sharedLibraries": true,
            "recent": true,
            "oneDrive": true
        }
    },
    "selection": {
        "mode": "single"
    }
}

This worked great a few days ago with the same authentication and picker settings, but it no longer does.

Could you please help us figure out what is causing this and how to fix it?

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 3d07a81d-cdaf-bafb-c1d5-aaf640d8de09
• Version Independent ID: c674b276-f0cb-a5d6-3098-6a31c417f162
• Content: OneDrive File Picker - OneDrive dev center
• Content Source: docs/controls/file-pickers/index.md
• Product: onedrive
• GitHub Login: @patrick-rodgers
• Microsoft Alias: patrodg

Selecting from File Picker search results fails - Json is different

Hey guys,
we applied the feature related to the issue #20. Many thanks for considering my request. The feature is really good.

But we realized that in my application I can only pick (select) just some files/folders from the search result. If navigating to a folder/file and selecting an item works fine. However, the Select button does not work when we search for an item and select it from the search results. The Select button greys out with a spinning icon for a few seconds and then displays again, but nothing happens. The item is not selected.

Below you can see a gif where I reproduced the problem:
Test 1:

1. Call the File Picker
2. Navigate manually to the File that I want to attach (Site> Documents> Invitation> Invitation letter for dinner.docx)
3. Check the File
4. Click Select > Works Fine.

Test 2:

1. Call the File Picker
2. Type dinner in search. Press enter
3. Check the file
4. Click Select > Don't work. Select button greys out with a spinning icon for a few seconds and then displays again.

+Update: We realized that the problem is because some data is missing in the JSON when compared with the regular one. We need the ids (sharepointIds).

Could you help us with this?

Broken links to samples

There are two links to samples on this page (perhaps more I did not see) that are broken. The current URLs that are not resolving for me are:

https://aka.ms/OneDrive/samples/file-picking, under the text Just Show Me The Sample Code
https://github.com/microsoft/odsp/tree/main/samples/file-picker, under the text variety of samples

Please fix these, as it would be very helpful to see examples of the v8.0 picker!

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 3d07a81d-cdaf-bafb-c1d5-aaf640d8de09
• Version Independent ID: c674b276-f0cb-a5d6-3098-6a31c417f162
• Content: OneDrive File Picker - OneDrive dev center
• Content Source: docs/controls/file-pickers/index.md
• Product: onedrive
• GitHub Login: @patrick-rodgers
• Microsoft Alias: patrodg

OneDrive File Picker v8 - there is https://graph.microsoft.com/beta/ used, beta should not be used for production application

Describe the bug
When accessing documents of shared team, graph beta is used (https://graph.microsoft.com/beta/).
According to https://learn.microsoft.com/en-us/graph/use-the-api, beta version should not be used for production application.

Expected behavior
Graph v1.0 should be used

How to migrate onedrive filpicker from onedrive7.2 to 8.0

We are using javascript onedrive filepicker 7.2 in our application.
https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/?view=odsp-graph-online

If we need to migrate from onedrive v7.2 to v8, what are the steps need to follow

No Download File Url

I've implemented the Javascript client logic into my app and can successfully show the file picker to a user and allow them to select file(s) from their OneDrive, however when I receive the file information in the message handler after selecting the files there doesn't appear to be a 'Download Url' value. I was expecting to receive a '@microsoft.graph.downloadUrl' (or similar) value. The values that I'm receiving instead are:

@sharePoint.embedUrl: "XXX"
@sharePoint.endpoint: "XXX"
@sharePoint.listUrl: "XXX"
folder: "XXX"
id: "XXX"
name: "XXX"
parentReference: {...}
size: XXX
webDavUrl: "XXX"
webUrl: "XXX"

Is there a certain param value that's required in order to get a download URL for the selected files? Or some other way to retrieve this information?

My current params are:

const params = {
        sdk: "8.0",
        entry: {
            oneDrive: {
                files: {},
            }
        },
        authentication: {},
        selection: {
            mode: 'multiple'
        },
        messaging: {
            origin: "https://localhost",
            channelId: "27"
        },
        typesAndSources: {
            mode: "files",
            pivots: {
                oneDrive: true,
                recent: false,
                sharedLibraries: true
            },
        },
    };

Unable to access SharePoint file under "Quick Access" in the v8 file picker

Describe the bug

Unable to access SharePoint files under "Quick Access" in the v8 picker. "My Files" and "Recents" work correctly. We were able to access SharePoint files under "Quick Access" in the v7 picker.

The error shown in the picker is: Exception of type 'Microsoft.IdentityModel.Tokens.AudienceUriValidationFailedException'

To Reproduce

Open the picker and access SharePoint content under Quick Access.

Expected behavior

To be able to access SharePoint files under Quick Access.

Screenshots

Details

The access token being provided to the picker has scopes like:

https://m365edu123456-my.sharepoint.com/Files.ReadWrite.All
https://m365edu123456-my.sharepoint.com/User.Read
https://m365edu123456-my.sharepoint.com/.default

The access token sent to the picker has an audience claim of https://m365edu123456-my.sharepoint.com.

The authority is https://login.microsoftonline.com/common/. I've tried the authority https://login.microsoftonline.com/<<tenantid>> but the result is the same.

I can see several "authenticate" commands being sent by the picker. I'm currently responding to all of them with the same token, but perhaps that is not correct?

Here's the 3 "authenticate" commands the picker is sending:

{
    "command": "authenticate",
    "resource": "https://m365edu123456-my.sharepoint.com",
    "type": "SharePoint_SelfIssued"
}

{
    "command": "authenticate",
    "resource": "https://m365edu123456-my.sharepoint.com",
    "type": "SharePoint"
}

{
    "command": "authenticate",
    "resource": "https://m365edu123456.sharepoint.com",
    "type": "SharePoint_SelfIssued"
}

Do these require different access tokens to be generated?

File Browser: Browser Configuration Schema in documentation differs from code sample

Issue description
The File Browser configuration schema in the documentation differs from the schema used in the typescript-react sample.. In the documentation, the entry parameter includes the authentication, breadcrumb, commands etc. parameters whereas in the actual code sample these are separate entries in the JSON schema.

Also note, that the link to the code sample from the documentation page is broken.

Steps To Reproduce
Inspect the Browser Configuration schema in the documentation and compare it to the schema used in the typescript-react File Browser sample code. Note that in the documentation the authentication and breadcrumb parameter are under the entry parameter whereas this is not the case in the code sample where they are at the same level as the entry parameter. It looks like the Browser Configuration Schema in the documentation is not correct.

Expected behavior
Code sample corresponds to documentation and documentation links correctly to sample repo.

Screenshots
code sample:

Schema used in documentation:

entry: {
       sharePoint?: {
           byPath?: {
               web?: string;
               list?: string;
               folder?: string;
               fallbackToRoot?: boolean;
           };
       };

       oneDrive?: {
           files?: {
               folder?: string;
               fallbackToRoot?: boolean;
           };
       };
       authentication: {
           claimsChallenge?: {
               enabled?: boolean;
           };
       };
       breadcrumb?: {

           root?: {
               sharePoint?: {
                   byPath?: {
                       web?: string;
                       list?: string;
                       folder?: string;
                   };
               };
           };
       };

FilePicker v8 requires multiple clicks to select 'places' when in compact mode

When the filepicker is in "compact mode" (i.e. the the width is small, and rather than displaying the 'places' to the left, and the 'directory listing' to the right, it only displays one at a time.) it can require multiple clicks to choose a new 'place'. see the following video:

https://youtu.be/Uy8hyXxq3ds

it always requires two clicks to access SharePoint places (the first account demoed in the above video), however the situation is worse with the consumer onedrive.live.com personal accounts (the second account demoed) ... you can see that it will not navigate to 'My Files' at all, until you first navigate to 'Photos' and then back again.

i don't believe this behaviour is a problem with my implementation, because when not running in "compact mode" it all works fine.

with thanks

Getting the picker v8.0 to access with MS Graph Token

Hello,

I've implemented a picker to access OneDrive/ Sharepoint using V 8.0 SDK. Our platform is heavily dependent on Microsoft Graph to perform access for all our customers.

Here is the implementation example:

import { useEffect, useState } from 'react';
import { ODPickerCallBack, ODPickerConfiguration } from './Types';

let win: any = null;
let port: any = null;
const baseUrl = 'https://xxxxxxxxx.sharepoint.com';

export const useOneDrivePicker = (getToken: () => Promise<any>) => {
    const [selectedOneDriveFileCallBackInfo, setSelectedOneDriveFileCallBackInfo] = useState<ODPickerCallBack>();
    const [selectedCancelOneDriveCallBackInfo, setSelectedCancelOneDriveCallBackInfo] = useState<boolean>();
    const [errorOneDriveCallBackInfo, setErrorOneDriveCallBackInfo] = useState<unknown>();

    const OnSuccessCallback = (files: ODPickerCallBack) => {
        setSelectedOneDriveFileCallBackInfo(files);
    };

    const OnCancelCallback = () => {
        setSelectedCancelOneDriveCallBackInfo(true);
    };

    const OnErrorCallback = (error: unknown) => {
        setErrorOneDriveCallBackInfo(error);
    };

    /**
     * Combines an arbitrary set of paths ensuring and normalizes the slashes
     *
     * @param paths 0 to n path parts to combine
     */
    function combine(...paths: any[]) {
        return paths
            .map((path) => path.replace(/^[\\|/]/, '').replace(/[\\|/]$/, ''))
            .join('/')
            .replace(/\\/g, '/');
    }

    // the options we pass to the picker page through the querystring
    const params = {
        sdk: '8.0',
        entry: {
            oneDrive: {
                files: {},
            },
        },
        selection: {
            mode: 'single',
        },
        authentication: {},
        messaging: {
            origin: 'http://localhost:3000',
            channelId: '400',
        },
        typesAndSources: {
            mode: 'files',
            pivots: {
                oneDrive: true,
                recent: true,
                sharedLibraries: true,
            },
        },
    };

    async function messageListener(message: any) {
        // get a graph token
        const token = await getToken();
        console.log('token in message=', token);
        switch (message.data.type) {
            case 'notification':
                console.log(`notification: ${message.data}`);
                break;

            case 'command':
                port.postMessage({
                    type: 'acknowledge',
                    id: message.data.id,
                });

                const command = message.data.data;
                // eslint-disable-next-line no-case-declarations
                switch (command.command) {
                    case 'authenticate':
                        if (typeof token !== 'undefined' && token !== null) {
                            port.postMessage({
                                type: 'result',
                                id: message.data.id,
                                data: {
                                    result: 'token',
                                    token,
                                },
                            });
                        } else {
                            console.error(`Could not get auth token for command: ${JSON.stringify(command)}`);
                        }

                        break;

                    case 'close':
                        win.close();
                        break;

                    case 'pick':
                        console.log(`Picked: ${JSON.stringify(command)}`);

                        console.log(`<pre>${JSON.stringify(command, null, 2)}</pre>`);

                        port.postMessage({
                            type: 'result',
                            id: message.data.id,
                            data: {
                                result: 'success',
                            },
                        });

                        win.close();

                        break;

                    default:
                        console.warn(`Unsupported command: ${JSON.stringify(command)}`, 2);

                        port.postMessage({
                            result: 'error',
                            error: {
                                code: 'unsupportedCommand',
                                message: command.command,
                            },
                            isExpected: true,
                        });
                        break;
                }

                break;
            default:
                console.warn(`Unsupported message: ${JSON.stringify(message.data.type)}`, 2);
        }
    }

    const openOneDrivePicker = (odPickerConfig: ODPickerConfiguration) => {
        // Everything went fine, create the picker.
        if (odPickerConfig.accessToken) {
            console.log('token=', odPickerConfig.accessToken);

            win = window.open('', 'Picker', 'width=800,height=600');

            if (!win) return;

            const queryString = new URLSearchParams({
                filePicker: JSON.stringify(params),
            });

            const url = combine(baseUrl, `_layouts/15/FilePicker.aspx?${queryString}`);

            const form = win.document.createElement('form');
            form.setAttribute('action', url);
            form.setAttribute('method', 'POST');
            win.document.body.append(form);

            const input = win.document.createElement('input');
            input.setAttribute('type', 'hidden');
            input.setAttribute('name', 'access_token');
            input.setAttribute('value', odPickerConfig.accessToken);
            form.appendChild(input);

            form.submit();

            window.addEventListener('message', (event) => {
                if (event.source && event.source === win) {
                    const message = event.data;

                    if (message.type === 'initialize' && message.channelId === params.messaging.channelId) {
                        port = event.ports[0];

                        port.addEventListener('message', messageListener);

                        port.start();

                        port.postMessage({
                            type: 'activate',
                        });
                    }
                }
            });
        } else {
            console.error('oauth Token no found:');
        }

        // eslint-disable-next-line consistent-return
        return true;
    };

    return {
        openOneDrivePicker,
        selectedOneDriveFileCallBackInfo,
        selectedCancelOneDriveCallBackInfo,
        errorOneDriveCallBackInfo,
    };
};

You will find below a screenshot of the error message :

So basically, in my MS Graph token my ‘audience’ is as follows:
"aud": "https://graph.microsoft.com/"

Is there currently a way to make the picker work with MS Graph ? Please advise.

Thanks in advance for your Help.

Issue moved up from comment

@patrick-rodgers
Hello,
I am trying to implement a picker to access OneDrive/Sharepoint using V8.0 for my organisation(react app).
I tried your repository samples/file-picking/javascript-consumers/ code but its working for OneDrive Picker i also want to integrate SharePoint Picker so base url for SharePoint and scopes is missing in that repository and i am also confused with API Permission in ADD app. It will be grate if you help me step by step or with code.
Thanks..

Originally posted by @rahul-vyavahare in #6 (comment)

OneDrive File Picker v8 - Opening documents of shared team requires 2 clicks

Describe the bug
First time opening documents of shared team requires 2 clicks. Later it is working OK, documents are opened after 1 click.

To Reproduce
Please see attached movie:

OneDrive.FilePicker.v8.-.Issue.with.opening.shared.teams.-.2.cklics.mp4

Expected behavior
Shared team should be opened after 1 click.

Save Files to One Drive via Modal

I am currently working on a requirement that requires me to implement two things:

1. Users should be able to pick files from their One Drive
2. Users should be able to Save files to their One Drive.

I am able to achieve #1 of requirements with the help of Onedrive File Picker v8 control & I also referred to the samples project.

But for #2 requirement, where users could save files to their OneDrive, I am unable to find a sample reference code. Shall I be using the same File Picker v8 control even for Saving files to One Drive. But then, how can we get rid of the Select & Cancel button and just have the Save button. Is there any separate control that I should be using for Saving Files to One Drive via pop up modal Or is there any one property in file options that I can set.

What i need is a File Upload Modal with Save/Select button ( like how we get in Google Drive when we upload the docs)

I got a reference to this document but it is using old control:
https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/save-file?source=recommendations&view=odsp-graph-online

Is there any similar document to the new Save File control as well.

Is there any plan for V7 deprecation?

First of all, I apologize for asking this particular info here, Because I didn't get any other forum to ask this question.
My question is, is there any plan to deprecate the V7 file picker (Onedrive7.2.js SDK)? Till how long the V7 file picker would be supported? Any tentative date for the V7 stoppage?

OneDrive File Picker v8 - Chrome browser v112 - There are errors with type Refused to get unsafe header...

Describe the bug
Chrome Version 112.0.5615.50 (Official Build) (64-bit), in Developer Tools opened on File Picker there are errors with type "Refused to get unsafe header..."

Can these errors cause any problems with File Picker?

Expected behavior
There should not be this kind of errors

Document Sets are not visible when filtering on file extension in typesAndSources in configuration schema

Issue:

A user is required to pick a file of certain extension in the workflow. We pass the extension in the 'filters' parameter in 'typesAndSources' in the Picker Configuration Schema. The filtering seems to work fine. I receive the files with the required extension and the folders in the Sharepoint site. The issue is that the Document Sets are not visible. This hinders the user to pick files of similar extension in the Document Sets.

The only possible options we can put in filters is string array with values like:

  - photo
  - video
  - audio
  - folder
  - file
  - extensions prefixed with '.'

Possible Solutions:

• Treat the shared documents as folders
• Maybe add another parameter to filter based on the 2 content types, i.e. document sets and folder.
• Add Document Sets in the filters options

Document Reference:
https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/v8-schema?view=odsp-graph-online

FilePicker v8 with Sharepoint accounts

Hello,

I created an app that uses JS FilePicker v8. With personal accounts everything works as expected. But when I try to sign in to my work account (@.onmicrosoft.com), I get message "That Microsoft account doesn't exist. Enter a different account or [get a new one]".

If I replace the authority URL https://login.microsoftonline.com/consumers with https://login.microsoftonline.com/common, I can sign in both to my personal and work accounts.
But when I try to open a picker window with my personal account, I get error "AADSTS70011: The provided value for the input parameter 'scope' is not valid. The scope 'onedrive.readwrite openid profile' is not configured for this tenant.".

How to make one JS FilePicker for all users both with personal or corporate accounts?

Thanks.

FilePicker v8, consumer, does not honour entry.oneDrive.files.folder

hi,

when using the FilePicker v8 against live.onedrive.com, it does not honour the start directory. i.e. the value set in:

.entry.oneDrive.files.folder (as taken from here: https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/v8-schema )

i have no trouble setting the start directory when accessing share points, but it looks like it doesn't work against live.onedrive.com

OneDrive File Picker v8 - bug in searching related to cleaning Searching criteria

Describe the bug
In searching functionality, there is bug related to cleaning Searching criteria.

To Reproduce

1. Search using some text, press Enter -> filter is applied
2. Clear searching criteria by "x" sign -> text is removed from Search field, but file list is not refreshed, they are still filtered
3. Press Enter -> empty string "" is used for searching, so nothing is displayed
4. You have to click for example "My files" to refresh the list of files, and correct the problem.

Please see the movie:

OneDrive.FilePicker.v8.-.bug.in.searching.mp4

Expected behavior
After cleaning the searching criteria by "x" and pressing Enter, the list of files should be refreshed, and files should be displayed without any filtering (there are not any searching criteria).

Authentication Login popup blocked by browser

Describe the bug
I'm using the javascript-basic-consumer sample project. When first using the file picker, the first popup window is displayed, however the second authentication popup is blocked by the browser.

Cannot find module '@pnp/picker-sdk' or its corresponding type declarations.

Describe the bug
While trying to implement the sample for typescript it is keep on showing that module is not fount although it is there in the node module.

To Reproduce
first what i did is, just tried to run the sample code after npm install it is showing the error then ii imported the files in my project and the error is still present

Expected behavior
It is supposed to get imported in the ts file for implementation

Screenshots

Please HElp me resolve this issue. I have been trying to fix this since days i have tried many a things.

Issue with File Download Redirect in TypeScript React Example

Issue Description:
I have followed the example code provided in the file-picking/typescript-react repository for file picking. The code is identical to the example given.

The problem I am facing happens after selecting a file (in my case, a .xlsx file). That file gets selected and loaded without any issues, and the file's thumbnail also appears as expected. However, when I click the download button to download the file, it redirects me to my OneDrive folder and then to the online version of the file.

Is this the intended behaviour of the file download functionality in this example? There may be an issue with the download process.

Steps to Reproduce:

1. Clone the file-picking/typescript-react repository.
2. Follow the example code for file picking.
3. Select a .xlsx file.
4. Click the download button.

Expected Behavior:
Clicking the download button should initiate the download of the selected file directly without any unexpected redirects.

Actual Behavior:
Clicking the download button redirects me to my OneDrive folder and then opens the online version of the file.

Please let me know if there's any additional information needed to address this issue.

How to find the baseURL

Am currently developing an application in which I am hosting the MS V8 file picker. The application is mainly about the file viewer, any person with an Org account or Personal account can view or download their files. While implementing I was facing an issue, The issue is I have hard-coded a particular baseURL to load the v8 picker for testing (Test environment). But in production different org people or personal users may log in, So how do I find out the baseURL for that user? Also from the previous issues, I understood that the v8 picker won’t support the graph APIs. So is there any workaround that I can fetch the baseURL before login?

FYI: Also we cannot ask users for their tenant URL every time when they log in. Because the same user can have both personal and org login.

FilePicker v8 using Web instead of SPA AAD Authentication

Describe the bug
In the setup instructions, it says to create a Single-page application registry. We've already integrated the v7 file picker with a Web AAD Application for authentication and would like to re-use this with the new file picker, however we end up with authentication errors if we use the token generated with a Web authentication flow.

Is it possible to use a Web access token to instantiate the v8 file picker?

To Reproduce
Steps to reproduce the behavior:

• Create a Web authentication AAD app.
• Instantiate the v8 file picker, as in the examples in this repo.
• Use an access token generated from a Web AAD application when the file picker sends the authentication message.

Expected behavior
The picker should work using either SPA or Web AAD authentication?

Screenshots

OneDrive example only works because of side-effect

hi,

if you take a look here:

https://github.com/OneDrive/samples/blob/master/samples/file-picking/javascript-basic/scripts/auth.js#L17

you'll see that authParams is never defined, and so this attaches it to the window object.

in practice, this getToken() is called twice in quick succession, once with a command.type of 'SharePoint', and subsequentily with 'SharePoint_SelfIssued'. i have no idea what this SharePoint_SelfIssued thing is, but you have to respond to it the same way you'd respond to 'SharePoint'.

this is where the example gets tricky - because the switch() doesn't match 'SharePoint_SelfIssued', it falls to the default case and breaks ... with authParams having never been assigned to. however, it still works, because authParams is actually window.authParams and was assigned when getToken() was called with 'SharePoint' the first time.

but i don't think this is the intended behaviour ... it looks as though this only works like this by accident.

OneDrive and SharePoint File Picker v8 - ChannelSettings.Read.All

Super excited about the new FilePicker v8! However I am wondering why the ChannelSettings.Read.All permission scope is needed if we already have Groups.ReadWrite.All? It will certainly hurt adoption if we need another admin consented scope to have it working.

Category

• Question
• Documentation issue
• Bug

OneDrive File Picker v8 - Production integration has stopped working and raising a 404 error

Hi,

We've had a working integration in our product using the OneDrive File Picker v8 and have had several customers using it without issue. In the last few weeks however, we got reports that it was no longer working, and indeed our own testing has shown that it's now generating some errors in the browser console after the authentication stage - namely a POST 404ing, followed by many JS errors from within the picker frame. I can see that some content has loaded inside the picker frame, but at that point it fails and displays nothing.

The source of the request that 404s is interestingly in a file path dated June 2nd which would line up to when this started happening.

I've had a look over the documentation in case something had changed about how this is supposed to be implemented, but I haven't found anything, and so we're turning here for help. One note related to the picker config below - as said this was working with the below config, but I did try many variations on the entry field (full url, specifying folders etc.) and all result in the same error. Real values replaced with customer_ variables below.

Picker configuration:

const params = {
  sdk: '8.0',
  entry: {
    sharePoint: {
      byPath: {
        web: `/sites/customer_site_name`
      }
    }
  },
  authentication: {},
  messaging: {
    origin: document.location.origin,
    channelId: channelId
  },
  typesAndSources: {
    mode: 'files',
    pivots: {
      recent: false,
      oneDrive: false,
      sharedLibraries: false
    }
  },
  selection: {
    mode: 'multiple'
  }
};

404 error

• 404ing request: POST https://customer_tenant.sharepoint.com/_api/web/GetListUsingPath(DecodedUrl=@a1)/RenderListDataAsStream?@a1=%27%2Fsites%2Fcustomer_site_name%27&RootFolder=%2Fsites%2Fcustomer_site_name&TryNewExperienceSingle=TRUE
• Raised from: https://res-1.cdn.office.net/files/odsp-web-prod_2023-06-02.001/spofilepickerwebpack/plt.listviewdataprefetch.js

JS errors

Teams Webclient vs Teams Desktop Client

We are currently implementing the OneDriveFilePicker v8 in a custom Teams tab application that integrates with a partner 3rd party e signature platform. When using from the web client the picker behaves as expected. However, when same code is tested in the desktop client it seems that the picker app is blocked from loading. Can the developers please verify that the opening of the OneDriveFilePicker is possible in the desktop client (similar to "Attach cloud files" from chat) and if so can someone point to a sample configuration that might point us in a direction to resolve this issue?

Document Sets are intermittently treated as "files"

Describe the bug
When reproducing a user's scenario on a screenshare, their Document Set is being seen as a file (can not click into it) and not a folder with a collection of documents.

When performing this in my personal SharePoint environment, the Document Set is treated as a folder and works fine.

When performing the network trace on the user's screens are and looking at the decoded URL (and prettified for debugging)

URL:

https://redactedname.sharepoint.com/_layouts/15/FilePicker.aspx?

Query Parameters ( decoded & beautified):

filePicker = {
    "sdk": "8.0",
    "entry": {
        "sharePoint": {
            "byPath": {
                "list": "https://redactedname.sharepoint.com/sites/redated site/redacted name/Forms/All Files.aspx"
            }
        }
    },
    "authentication": {},
    "messaging": {
        "origin": "https://app.redacted.com",
        "channelId": "42"
    },
    "selection": {
        "mode": "single"
    },
    "typesAndSources": {
        "mode": "files",
        "pivots": {
            "oneDrive": true,
            "recent": true,
            "sharedLibraries": true,
            "shared": true,
            "search": true
        },
        "filters": [".docx", "folder", "file", ".pptx"]
    }
} & needsAttentionView = 1 & id = /sites/redacted site/ redacted name & listurl = /sites/redacted site/ redacted name & viewid = ee99d9fa-4f53-4ddd-a50a-a97a6f6f4d90&p=2" ` `

I also noticed that the document set has a custom content type whereas mine does not.

Is there a reason why in my tenant I can click through the Document Set, but in theirs I can not? Could it be a scopes/permissions issue? Or the custom content type against my filters?

Using MSAL without Cookies: Acquiring Tokens and Authentication Flows with Existing Microsoft Graph Tokens

I have successfully authenticated with Microsoft for Microsoft Graph and have obtained a Microsoft Graph access token and refresh token. However, my scenario requires using the MSAL library without relying on cookies for authentication. I would like to know if it is possible to utilize MSAL to acquire tokens and perform authentication flows using the existing Microsoft Graph access token and refresh token, without requiring cookies. Any guidance or insights on how to achieve this would be greatly appreciated. Thank you!

Does Filepicker v8.0 support search?

Hi guys,
We are implementing the OneDrive File Picker. It's looking good, but some of our clients need the possibility of searching for files thru FilePicker.

I'm still determining if I missed something here, but I didn't find that option. Is this something that can be done?

v8 FilePicker does not honour entry.oneDrive.files when accessing onedrive.live.com accounts

video demonstrating the issue:

https://youtu.be/swX_ZH_kVpM

From the schema here: https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/v8-schema

      /**
       * Indicates that the File Picker should start in the user's OneDrive.
       */
      oneDrive?: {
         /**
         * Indicates that File Picker should start in the user's recent files.
         */
         recent?: {};
         /**
         * Specifies that File Picker should start in the user's Files tab.
         */
         files?: {
            /**
             * Path segment for sub-folder within the user's OneDrive.
             * @example
             *  'Pictures'
             * @example
             *  '/personal/user_contoso_com/Documents/Attachments'
             */
            folder?: string;
         }
      };

the example listed is 'Pictures' but if you try that with a onedrive.live.com account, that does not work. i cannot find any value that changes the entry point of the file picker when accessing live.onedrive.com accounts ... note that i can get some paths to work when accessing sharepoints (aka non-onedrive.live.com accounts).

with thanks

Opening File Picker without Sharepoint

Hello, my team is looking to implement the File Picker in conjunction with the Microsoft Graph in order allow a user to download files. Specifically, however, we are only looking to download from OneDrive, and don't need Sharepoint. Is it possible to open the File Picker through OneDrive, at a link that does not require the user to have Sharepoint (not https://{tenant}-my.sharepoint.com)?

V8 window is not working as expected in mobile and narrow screen

Am trying to load the file picker in the mobile browser, but it is not opening, it shows only the My files, Recent and photo options. When I click on any of the options it stuck there. Sometimes it opens (Dont know in what case it is working). So I decided to change the height and width of the window and end up with the same scenario. For your information, I have attached the video for reference.

ms.v8.isssue_new.mp4

Also, What am trying is, I need to open the v8 picker on the same screen (Below the launch picker button). But it shows an empty content view and after 40 seconds it shows an error. Attached image below

How to get base url for personal accounts - picker v8

Hello,

Describe the bug
With reference to this #21 could not get the web url from the https://graph.microsoft.com/v1.0/me/drive but I found it in https://graph.microsoft.com/v1.0/me/drive/root. The web url gotten from this endpoint for a business account is "{tenant}.sharepoint.com" but for personal accounts it is https://onedrive.live.com/?cid=xxxxx.

The issue is when the base url is combined with "_layouts/15/FilePicker.aspx" personal accounts return an item not found view, for business account it seems to work fine

To Reproduce

• Make a oauth request with msal using the '/common' authority - with the scope "https://graph.microsoft.com/.default" (do not pass the base url at this point)
• Acquire token using the login functions
• Make a request to https://graph.microsoft.com/v1.0/me/drive/root and parse web url to get the base url
• Determine if a new token should be generated if the user is a business account and pass the base url gotten from previous step
• Combine the base url with "_layouts/15/FilePicker.aspx" and trigger popup for picker

Expected behavior
Expected a picker screen for personal one drive accounts instead received item not found.

Screenshots

Details
I am trying to create a space where users can open their one drive and share links to files with me via the file picker v8

Thank you.

Scope Definition for V8 version

Hello,

I am trying to implement a picker to access OneDrive/Sharepoint using V8.0 for my organisation.
We have a working setup for V7.2 and planning to migrate on V8 version.

Scope (V7.2) : profile openid https://graph.microsoft.com/User.Read https://graph.microsoft.com/Files.Read.All
Scope (V8) : https://xxxxxxxxx-my.sharepoint.com/.default (Only Scope that worked)

It seems the scopes my organisation was using for V7.2 are no longer working for V8 version.
V8 version is only working with baseUrl/.default

If we try with same scope that we defined for V7.2 version, we receive below error
{"error_description":"Exception of type 'Microsoft.IdentityModel.Tokens.AudienceUriValidationFailedException' was thrown."}

Is there any way that V8 version will work with below scope?
"profile openid https://graph.microsoft.com/User.Read https://graph.microsoft.com/Files.Read.All"

Question 2 :
What should be the baseURL for personal user accounts. e.g [email protected] [email protected] ?

FileBrowser: Theme support?

Is your feature request related to a problem? Please describe.
I've been using the FileBrowser component and find it frustrating that there does not seem to be a documented way to set the Theme. There is nothing in the Browser Configuration object and passing additional query string parameters such as &theme=dark does not work.

Describe the solution you'd like
I'd like to know whether and how the FileBrowser can be rendered using a different Theme. Either by passing the Theme in the Browser Configuration options or through an additional query string parameter.

Describe alternatives you've considered
I've tried adding additional query string parameters such as. &theme=dark.

Additional context
The code samples and File Browser documentation do not show how to render the FileBrowser with a different Theme. Can the documentation or samples be updated to cover this scenario?

Sharepoint Entry Strings Issues

Describe the bug
I am trying to specify an entrypoint into Sharepoint but I am unable to figure out how to format the strings. Let's say I have this path in Sharepoint (excuse my highlighting and anonymization skills)

For this directory:

How should my Sharepoint Entry look in the options? I've tried a few things including some of what I used below (Note, this is my options but I am programmatically setting it)

This is what I am seeing on my end and it works inconsistently with other paths:

For my application's user experience, the idea is for someone to set this path in the UI and I add it to the options for the initial entry point.

Thank you in advance!

Types.ts from samples are incomplete

IFilePickerOptions from here:

https://github.com/OneDrive/samples/blob/master/samples/file-picking/sdk-pnptimeline/src/types.ts#L1-L28

is missing some entries listed here:

https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/v8-schema

tray for one, and maybe others.

Specifying sharedLibraries = true in typesAndSources.pivots generates a security related exception

We want to allow users to pick files from SharePoint and Teams sites/drives as well as their personal OneDrive folder. The documentation indicates that this should be performed by specifying sharedLibraries = true as described in the issue summary. When the picker is presented, the user's list of SharePoint and Teams sites shows correctly on the left hand side of the picker. However, as soon as a SharePoint site is selected on the left hand side in order to view that site's files, the following message is presented to the user:

Exception of type 'Microsoft.IdentityModel.Tokens.AudienceUriValidationFailedException' was thrown.

To reproduce this error:

1. Start with the basic js demo located in samples/file-picking/javascript-basic
2. In auth.js, specify the tenant id as described in the documentation
3. In index.html, set the baseUrl to the user's base OneDrive path as described in the documentation (for example "https://XXXXXXXX-my.sharepoint.com")
4. In index.html, at line 38, add the property sharedLibraries: true to the pivots property

The expected behavior is that the user can navigate SharePoint/Teams sites/drives as well as their own OneDrive files. The actual behavior is that a user can browse their own files, but an exception is presented when attempting to view SharePoint/Teams files.