onedrive / samples Goto Github PK
View Code? Open in Web Editor NEWContains samples, scenarios, and guidance for integrating with OneDrive and SharePoint drives, drive items, and files.
License: MIT License
Contains samples, scenarios, and guidance for integrating with OneDrive and SharePoint drives, drive items, and files.
License: MIT License
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.
Is there an example of using OneDrive Picker v8 with personal Microsoft accounts? All the examples I can see use business accounts.
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?
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."
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
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.
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:
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.
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.
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
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.
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.
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
test
Recent
tab againtest.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).
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
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?
⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.
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:
Test 2:
+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?
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!
⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.
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
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
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
},
},
};
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?
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.
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;
};
};
};
};
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:
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
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.
@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)
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:
Expected behavior
Shared team should be opened after 1 click.
I am currently working on a requirement that requires me to implement two things:
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.
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?
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:
Document Reference:
https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/v8-schema?view=odsp-graph-online
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.
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
Describe the bug
In searching functionality, there is bug related to cleaning Searching criteria.
To Reproduce
Please see the movie:
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).
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.
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
Please HElp me resolve this issue. I have been trying to fix this since days i have tried many a things.
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:
file-picking/typescript-react
repository.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.
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.
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:
Expected behavior
The picker should work using either SPA or Web AAD authentication?
hi,
if you take a look here:
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.
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.
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
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
https://res-1.cdn.office.net/files/odsp-web-prod_2023-06-02.001/spofilepickerwebpack/plt.listviewdataprefetch.js
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?
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?
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!
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?
video demonstrating the issue:
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
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
)?
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.
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
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
https://graph.microsoft.com/v1.0/me/drive/root
and parse web url to get the base urlExpected behavior
Expected a picker screen for personal one drive accounts instead received item not found.
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.
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] ?
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?
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)
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!
IFilePickerOptions
from here:
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.
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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.