[[[https://codepen.io/box-platform/pen/rRZxYq]]]
<body>
<div class="container"></div>
</body>html,
body,
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 320px;
}
// NOTE: This codepen uses https://codepen.io/box-platform/pen/xBRLmP for static assets and authentication. The token used is a readonly token accessing public data in a demo enterprise.
// How to use this CodePen:
// 1. Get started with Box Platform and create an application: https://developer.box.com/docs/getting-started-box-platform
// 2. Generate an access token using an SDK or use a developer token from https://app.box.com/developers/console/ -> your application -> configuration in the left sidebar -> Generate Developer Token. See https://developer.box.com/docs/special-scopes-for-box-ui-elements for various scopes you can use for the file picker.
// 3. Whitelist 'https://s.codepen.io' in your CORS allowed origins in https://app.box.com/developers/console/ -> your application -> configuration in the left sidebar -> CORS Domains
// 4. Choose a folder ID or use '0' for the root folder.
// 5. Enter your access token below, replacing the existing access token. Replace the folder ID with yours from step 4.
var filePicker = new Box.FilePicker();
// Attach event listener for when the choose button is pressed
filePicker.addListener('choose', function(items) {
// do something with the items array
console.log(JSON.stringify(items, null, 2));
});
// Attach event listener for when the cancel button is pressed
filePicker.addListener('cancel', function() {
// do something
});
// Show the file picker
filePicker.show(configData.FOLDER_ID, configData.ACCESS_TOKEN, {
container: '.container',
chooseButtonLabel: 'Select'
});
External CSS
This Pen doesn't use any external CSS resources.