Application configuration for the Content uploader

I'm trying to run the content uploader described here: https://developer.box.com/guides/embed/ui-elements/uploader/

My application configuration is an individual app width OAuth 2.0. As the instruction say (commented in my source code below), I'm using the developper token which expires after an hour but it does not work.I have to set up the scope BASE_UPLOAD but I don't how to do this.The CORS Domain is set.

I need an acces token but I can't use the SDKs.

I also tried an app width restricted access where I can generate a primary and secondary token but this does not work as well.

This is my source code:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://cdn01.boxcdn.net/platform/elements/12.0.0/en-US/uploader.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn01.boxcdn.net/platform/elements/12.0.0/en-US/uploader.js"></script>
<title>Uploader</title>
<style>
html,
body,
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 320px;
} 
</style> 
</head>

<body>
<div class="container"></div>
</body>

<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>

<script>

var configData = {
ACCESS_TOKEN: "XU1p6iyNRpqNlI5JHvhx2NEaFPTs4pVU",
FOLDER_ID: '0',
}
</script>
<script id="rendered-js" >
// 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. As a result, uploads will not work with the provided token in this example.

// 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. The token you use must have upload permissions to the folder you wish to upload to. BASE_UPLOAD would be an appropriate scope to downscope to. See https://developer.box.com/v2.0/docs/special-scopes-for-box-ui-elements for more details.

// 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.

const uploader = new Box.ContentUploader();

// Show the content uploader
uploader.show(configData.FOLDER_ID, configData.ACCESS_TOKEN, {
container: '.container' });


// Log upload data to console
uploader.on('complete', data => {
console.log(`All files successfully uploaded: ${JSON.stringify(data)}`);
});

uploader.on('upload', data => {
console.log(`Successfully uploaded file with name "${data.name}" to Box File ID ${data.id}`);
});

uploader.on('error', data => {
console.log(`Error uploading file with name "${data.file.name}". The error was: "${data.error}"`);
});
//# sourceURL=pen.js
</script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
</body>

</html>

Would anybody be so kind to help?

Comments