aarongilman/box-content-preview-example-multiple-previews.markdown

## box-content-preview-example-multiple-previews.markdown

      
    Raw
  

              box-content-preview-example-multiple-previews.markdown
            
          
    Box Content Preview Example - Multiple Previews

Demo of the Box Content Preview UI Kit. See documentation at https://developer.box.com/docs/box-content-preview
A Pen by box on CodePen.
License.

  
## index.html
[[[https://codepen.io/box-platform/pen/xBRLmP]]]

<body>
    <div class="preview-container" id="preview1"></div>
    <div class="preview-container" id="preview2"></div>
    <div class="preview-container" id="preview3"></div>
    <div class="preview-container" id="preview4"></div>
</body>

## script.babel
// 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

// 3. Whitelist 'http://s.codepen.io' and '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. Upload a file using a SDK or to your Box account and get a file ID

// 5. Enter your access token below, replacing the existing access token. Replace the file ID with yours from step 4. If you do so, comment out the 'collection' option passed into preview.show().


for (let i = 1; i <= 4; i++) {
    const preview = new Box.Preview();
    preview.show(configData.FILE_ID, configData.ACCESS_TOKEN, {
      container: `#preview${i}`,
      showDownload: true
    });
}

## scripts
<script src="https://codepen.io/box-platform/pen/xBRLmP.js"></script>

## style.css
.preview-container {
    display: inline-block;
    border: 1px solid #eee;
    height: 490px;
    width: 24%;
}
	[[[https://codepen.io/box-platform/pen/xBRLmP]]]

	<body>
	<div class="preview-container" id="preview1"></div>
	<div class="preview-container" id="preview2"></div>
	<div class="preview-container" id="preview3"></div>
	<div class="preview-container" id="preview4"></div>
	</body>
	// 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

	// 3. Whitelist 'http://s.codepen.io' and '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. Upload a file using a SDK or to your Box account and get a file ID

	// 5. Enter your access token below, replacing the existing access token. Replace the file ID with yours from step 4. If you do so, comment out the 'collection' option passed into preview.show().


	for (let i = 1; i <= 4; i++) {
	const preview = new Box.Preview();
	preview.show(configData.FILE_ID, configData.ACCESS_TOKEN, {
	container: `#preview${i}`,
	showDownload: true
	});
	}
	.preview-container {
	display: inline-block;
	border: 1px solid #eee;
	height: 490px;
	width: 24%;
	}