Using Dropbox File Picker in a website

  • Web

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 Dropbox File Picker to a website!

Dropbox File Picker

#Registering the application

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

Navigate to and fill the form. You must select "Full Dropbox" access.

Create Dropbox application

Dropbox Application Key

#Adding the file picker

The integration in your web application is very easy

<script type="text/javascript"
        data-app-key="INSERT YOUR APPLICATION KEY"></script>

<button id="OpenDropboxFilePicker">Dropbox file picker</button>
document.getElementById("OpenDropboxFilePicker").addEventListener("click", e => {
    var options: DropboxChooseOptions = {
        success: function (files) {
             for (const file of files) {
                    const name =;
                    const url =;
                    console.log({ name: name, url: url });
        cancel: function () {
        linkType: "direct",
        multiselect: true,
        extensions: ['.pdf', '.doc', '.docx', '.html'],


// TypeScript definitions
declare var Dropbox: Dropbox;

interface Dropbox {
    choose(options: DropboxChooseOptions): void;

interface DropboxChooseOptions {
    success(files: DropboxFile[]);
    cancel?(): void;
    linkType: "direct" | "preview";
    multiselect: boolean;
    extensions?: string[];

interface DropboxFile {
    name: string;
    link: string;
    bytes: number;
    icon: string;
    thumbnailLink?: string;
    isDir: boolean;

#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 Dropbox FilePicker is very easy to use integrate in a web application, even more than the OneDrive File Picker. The user experience is different. OneDrive opens a new window, whereas Dropbox opens a new tab. While I prefer the Dropbox behavior, it may trouble some users.

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


nookienoq -

There is an error on row:13 for some reason.

And it would be great if you could put it in 1 page everything or downloadable example.

But thank you anyway 😃

Gérald Barré -

What is the error message and on which line (13 may be different in your context)?

nookienoq -

On this line: var options: DropboxChooseOptions = {

Error code: Uncaught SyntaxError: Unexpected token :

Would it be possible to get the entire example in one section instead of separate ones?

Gérald Barré -

My sample is in TypeScript, not JavaScript. So, you have to remove the typing information from the code. This means you have to remove : DropboxChooseOptions and everything after // TypeScript definitions. Also you have to remove <HTMLImageElement>. That should be ok after that.

If you want everything in one section, move the code of the section "Downloading the file" right after console.log({ name: name, url: url });. The download section also assume there is <img id="preview"> in your html.