Using OneDrive File Picker in a website

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 Picker

#Registering the application

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

Navigate to https://apps.dev.microsoft.com 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="https://js.live.net/v7.0/OneDrive.js"></script>
<button id="OpenOneDrive" type="button">Open from OneDrive</button>

The SDK provides one function to open the file picker: OneDrive.open

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); }
        };

        OneDrive.open(odOptions);
    });
}

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

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

Note: You'll find type definitions for TypeScript in the following gist https://gist.github.com/meziantou/c7d86fd6be049257ef46984459fc8629

#Downloading the file

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

fetch(url)
    .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.

#Conclusion

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

The full documentation: https://dev.onedrive.com/sdk/js-v72/js-picker-open.htm

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