Trouble using OneDrive picker in react frontend

Question

Trouble using OneDrive picker in react frontend

Martin 5

Hello,

We are using your API, specifically:

https://login.microsoftonline.com/common/oauth2/v2.0/token (to generate and refresh a token)
https://graph.microsoft.com/v1.0/me (to communicate with email and OneDrive).

We primarily handle this from C# in the backend, but we also want to allow users to use the OneDrive Picker in our React frontend for file selection.

To achieve this, we intended to use the following integration:

https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/open-file?view=odsp-graph-online

However, we are experiencing an issue when passing the access code:

If a user is already logged into any tab with a Microsoft account, that account is always used.
If a user is not logged in, they still receive a login prompt.

We would like to bypass this login prompt because we already have an access token available.

Here is the code we are using in React:

`function openFilePicker () {`

const odOptions = {

clientId: "XXXXXXXX",

action: "query",

multiSelect: true,

advanced: {

accessToken: "XXXXXXXXX",

endpointHint: "api.onedrive.com",

},

success: async (files: any) => {

await handler(files);

},

error: (error: any) => {

console.error("Fout bij ophalen van bestand:", error);

},

accountSwitchEnabled: false

};

// eslint-disable-next-line @typescript-eslint/ban-ts-comment

// @ts-ignore

window.OneDrive.open(odOptions);

}a

Could you help us determine how to correctly pass the access code to the OneDrive Picker?

1 answer

Your answer

Answer 1

Jayden-P 2,535 Microsoft External Staff Moderator

Hi @Martin,

Thank you for posting your question in the Microsoft Q&A forum.

Based on the information you have provided, it looks like you have problem with OneDrive File Picker.
This is my suggestion code, you could try to run this to see if it works.

// Ensure OneDrive SDK v7.2 is loaded:
// <script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>
 
function launchOneDrivePicker(accessToken, clientId) {
    if (!accessToken || !clientId) {
        console.error("OneDrive Picker: Missing access token or client ID.");
        return;
    }
 
    const pickerOptions = {
        clientId: clientId,
        action: "query", // Or "download", "pick", "save"
        multiSelect: false,
        advanced: {
            accessToken: accessToken, // Key for v7.2
            // Recommended if your token is for MS Graph:
            endpointHint: "https://graph.microsoft.com/v1.0/",
        },
        success: function(files) {
            console.log("Picker success:", files.values);
            if (files.values && files.values.length > 0) {
                // Example: Process the first selected file
                const file = files.values[0];
                console.log("Selected:", file.name, file.id);
                // Access download URL if available, e.g., file["@microsoft.graph.downloadUrl"]
            }
        },
        cancel: function() {
            console.log("Picker cancelled by user.");
        },
        error: function(error) {
            console.error("Picker error:", error);
            // Troubleshoot: Check token validity (scopes, audience, expiry), clientId, and endpointHint.
        }
    };
 
    OneDrive.open(pickerOptions);
}
 
/*
// --- How to use (example): ---
// const userToken = "YOUR_VALID_MS_GRAPH_ACCESS_TOKEN";
// const appId = "YOUR_AZURE_APP_CLIENT_ID";
// launchOneDrivePicker(userToken, appId);
 
// --- Critical Reminders (Not in the code, but for you): ---
// 1. Access Token MUST be valid:
//    - For MS Graph (https://graph.microsoft.com/).
//    - Correct scopes (e.g., Files.Read.All, Files.ReadWrite.All).
//    - Not expired.
// 2. `clientId` must match the one used to get the token.
//
// If login prompts persist, the token is likely the issue.
// Test token directly against MS Graph API first.
*/

I hope this information helps.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Jayden-P 2,535 Reputation points Microsoft External Staff Moderator

2025-06-04T07:34:07.5733333+00:00

Hi @Martin
Is there any update on this thread?

If the issue has been resolved, please mark the helpful replies as answers.

This helps others in the community facing similar problems.

Thanks for your understanding.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Jayden-P 2,535 Reputation points Microsoft External Staff Moderator

2025-06-04T12:44:16.24+00:00

Hi @Martin
I saw that your message has been deleted. Could you please resend the message you have sent?
Thanks for your understanding.
Martin 5 Reputation points

2025-06-05T06:55:43.2666667+00:00

Thank you for your response. I tried your version, but unfortunately without success. When I use your endpointHint, I get the screen as seen in the screenshot.
Changing the action has no effect either.

I tested the accessToken with code I have in the backend, which looks as follows:

public async Task<string?> GetFileNameFromOneDriveAsync(string accessToken, string fileId)

{

var url = $"https://graph.microsoft.com/v1.0/me/drive/items/{fileId}?select=name";

using var httpClient = new HttpClient();

httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);

var response = await httpClient.GetAsync(url);

if (!response.IsSuccessStatusCode)

{

var errorBody = await response.Content.ReadAsStringAsync();

throw new Exception($"Error retrieving file name: {response.StatusCode} - {errorBody}");

}

var responseBody = await response.Content.ReadAsStringAsync();

var jsonResponse = JsonConvert.DeserializeObject<JObject>(responseBody);

return jsonResponse?["name"]?.ToString();

}

To be sure, I also checked whether the clientId is the same when retrieving it as when using the picker, and it is indeed the same.
Martin 5 Reputation points

2025-06-05T06:56:20.28+00:00
Martin 5 Reputation points

2025-06-05T06:58:31.8133333+00:00

Thank you for your response.

I tried your version, but unfortunately without success. When I use your endpointHint, I get the screen as seen in the screenshot. Changing the action has no effect either.
Martin 5 Reputation points

2025-06-05T07:09:32.46+00:00

I also tested the accessToken with code I have in the backend, which looks as follows:

public async Task<string?> GetFileNameFromOneDriveAsync(string accessTokenPlaceholder, string fileIdPlaceholder)

{

// This code demonstrates how to call the Microsoft Graph API using an access token.

var url = $"https://graph.microsoft.com/v1.0/me/drive/items/{fileIdPlaceholder}?select=name";

using var httpClient = new HttpClient();

httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessTokenPlaceholder);

var response = await httpClient.GetAsync(url);

if (!response.IsSuccessStatusCode)

{

var errorBody = await response.Content.ReadAsStringAsync();

// For debugging, you would log or handle this error appropriately.

throw new Exception($"Error retrieving file name: {response.StatusCode} - {errorBody}");

}

var responseBody = await response.Content.ReadAsStringAsync();

// Assuming JsonConvert is from Newtonsoft.Json

var jsonResponse = JsonConvert.DeserializeObject<JObject>(responseBody);

return jsonResponse?["name"]?.ToString();

}

To be sure, I also checked whether the clientId is the same when retrieving it as when using the picker, and it is indeed the same.
Jayden-P 2,535 Reputation points Microsoft External Staff Moderator

2025-06-05T07:46:49.5833333+00:00

Hi @Martin
Thank you for your response.
I've conducted some research within the limits of the resources I can access, however I am not able to help you further.
I found some documents may help you. You could try using OneDrive Picker v8.0.
This version integrates with the Microsoft Authentication Library (MSAL) to handle authentication. It might solve your problem.

You can find more details at OneDrive File Picker - OneDrive dev center | Microsoft Learn
Once again, I apologize for being unable to resolve the problem.
Thank you for understanding.

Share via

Trouble using OneDrive picker in react frontend

1 answer

Your answer