meziantou/OneDriveFilePicker.ts

## index.html
<html>
<body>
    <script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
    <button id="OpenOneDrive" type="button">Open from OneDrive</button>
    <script src="onedrive.js"></script>

    <img id="preview" />
</body>
</html>

## OneDriveFilePicker.ts
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 });

                fetch(url)
                    .then(response => {
                        return response.blob();
                    }).then(blob => {
                        const url = URL.createObjectURL(blob);
                        (<HTMLImageElement>document.getElementById("preview")).src = url;
                    });
            }
        }
    }).catch(reason => {
        console.error(reason);
    });
});

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" /* display folder and files with extension '.png' only */
                filter: "folder,photo"
            },
            success: function (files) { resolve(files); },
            cancel: function () { resolve(null); },
            error: function (e) { reject(e); }
        };

        OneDrive.open(odOptions);
    });
}

interface OneDriveResult {
    value: OneDriveFile[];
    webUrl: string | null;
}

interface OneDriveFile {
    "@microsoft.graph.downloadUrl": string;
    "thumbnails@odata.context": string;
    id: string;
    name: string;
    size: number;
    thumbnails: Thumbnails[];
    webUrl: string;
}

interface Thumbnails {
    id: string;
    large: Thumbnail;
    medium: Thumbnail;
    small: Thumbnail;
}

interface Thumbnail {
    height: number;
    width: number;
    url: string;
}

interface OneDriveOpenOptions {
    clientId: string;
    action: "download" | "share" | "query";
    multiSelect: boolean;
    openInNewWindow: boolean;
    advanced: {
        filter?: string;
    }
    success(result: OneDriveResult): void;
    cancel(): void;
    error(e: any): void;
}

interface OneDrive {
    open(options: OneDriveOpenOptions);
}

declare var OneDrive: OneDrive;
	<html>
	<body>
	<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
	<button id="OpenOneDrive" type="button">Open from OneDrive</button>
	<script src="onedrive.js"></script>

	<img id="preview" />
	</body>
	</html>
	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 });

	fetch(url)
	.then(response => {
	return response.blob();
	}).then(blob => {
	const url = URL.createObjectURL(blob);
	(<HTMLImageElement>document.getElementById("preview")).src = url;
	});
	}
	}
	}).catch(reason => {
	console.error(reason);
	});
	});

	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" /* display folder and files with extension '.png' only */
	filter: "folder,photo"
	},
	success: function (files) { resolve(files); },
	cancel: function () { resolve(null); },
	error: function (e) { reject(e); }
	};

	OneDrive.open(odOptions);
	});
	}

	interface OneDriveResult {
	value: OneDriveFile[];
	webUrl: string \| null;
	}

	interface OneDriveFile {
	"@microsoft.graph.downloadUrl": string;
	"thumbnails@odata.context": string;
	id: string;
	name: string;
	size: number;
	thumbnails: Thumbnails[];
	webUrl: string;
	}

	interface Thumbnails {
	id: string;
	large: Thumbnail;
	medium: Thumbnail;
	small: Thumbnail;
	}

	interface Thumbnail {
	height: number;
	width: number;
	url: string;
	}

	interface OneDriveOpenOptions {
	clientId: string;
	action: "download" \| "share" \| "query";
	multiSelect: boolean;
	openInNewWindow: boolean;
	advanced: {
	filter?: string;
	}
	success(result: OneDriveResult): void;
	cancel(): void;
	error(e: any): void;
	}

	interface OneDrive {
	open(options: OneDriveOpenOptions);
	}

	declare var OneDrive: OneDrive;