<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Box File Selection</title>
<!-- Latest version of the picker css for your locale -->
<link
rel="stylesheet"
href="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/picker.css"
/>
</head>
<body>
<div class="container" style="height:600px"></div>
<!-- Latest version of the picker js for your locale -->
<script src="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/picker.js"></script>
<script>
var folderId = "123";
var accessToken = "abc";
var filePicker = new Box.FilePicker();
filePicker.show(folderId, accessToken, {
container: ".container"
});
</script>
</body>
</html>
const{ FilePicker }= Box;const filePicker =newFilePicker();/**
* Shows the file selection.
*
* @public
* @param {String} folderId - The root folder id.
* @param {String} accessToken - The API access token.
* @param {Object|void} [options] - Optional options.
* @return {void}
*/
filePicker.show(folderId, accessToken, options);/**
* Hides the file picker, removes all event listeners, and clears out the HTML.
*
* @public
* @return {void}
*/
filePicker.hide();/**
* Clears out the internal in-memory cache for the file picker. This forces
* items to be reloaded from the API.
*
* @public
* @return {void}
*/
filePicker.clearCache();/**
* Adds an event listener to the file picker. Listeners should be added before
* calling show() so no events are missed.
*
* @public
* @param {String} eventName - Name of the event.
* @param {Function} listener - Callback function.
* @return {void}
*/
filePicker.addListener(eventName, listener);/**
* Removes an event listener from the file picker.
*
* @public
* @param {String} eventName - Name of the event.
* @param {Function} listener - Callback function.
* @return {void}
*/
filePicker.removeListener(eventName, listener);/**
* Removes all event listeners from the file picker.
*
* @public
* @return {void}
*/
filePicker.removeAllListeners();