Using OneDrive File Picker in a website

  • Gérald Barré

In the previous post, We saw how to use drag & drop and copy/paste to upload files and directories. However, most users now store their files in the cloud (Microsoft OneDrive, Google Drive, Dropbox, etc.). So, it can be a great idea to allow users to select files directly from their cloud provider.

Let's see how to add the OneDrive File Picker to a website!

OneDrive File PickerOneDrive File Picker

#Registering the application

First, you need to register your application to get the Application Id.

Navigate to and click the "Register App" button. Follow the steps, and you'll get your Application Id:

#Adding the file picker

First, you must add the SDK and a button to open the file picker:

<script type="text/javascript" src=""></script>
<button id="OpenOneDrive" type="button">Open from OneDrive</button>

The SDK provides one function to open the file picker:

const oneDriveApplicationId = "INSERT YOUR APPLICATION ID";

function launchOneDrivePicker() {
    return new Promise<OneDriveResult | null>((resolve, reject) => {
        var odOptions: OneDriveOpenOptions = {
            clientId: oneDriveApplicationId,
            action: "download",
            multiSelect: true,
            openInNewWindow: true,
            advanced: {
                //filter: "folder,.png" // Show only folders and png files
                //filter: "folder,photo" // Show only folders and photos
            success: function (files) { resolve(files); },
            cancel: function () { resolve(null); },
            error: function (e) { reject(e); }

Then, you can bind the click event of the button:

document.getElementById("OpenOneDrive").addEventListener("click", e => {
        .then(result => {
            if (result) {
                for (const file of result.value) {
                    const name =;
                    const url = file["@microsoft.graph.downloadUrl"];
                    console.log({ name: name, url: url });
        }).catch(reason => {

Note: You'll find type definitions for TypeScript in the following gist

#Downloading the file

Once you get the file URL, you can easily download the file in JavaScript:

    .then(response => response.blob())
    .then(blob => {
        // TODO do something useful with the blob

        // For instance, display the image
        const url = URL.createObjectURL(blob);
        (<HTMLImageElement>document.getElementById("preview")).src = url;

You can also send the link to the server and let the server download it.


The OneDrive FilePicker is easy to integrate into a web application.

The full documentation:

Do you have a question or a suggestion about this post? Contact me!

Follow me:
Enjoy this blog?Buy Me A Coffee💖 Sponsor on GitHub