Create File Preview

Create File Preview

Once a file has been uploaded to the app token application, it may be previewed using two different methods:

  • Direct embed: A standard HTML <iframe> component with a custom embed link.
  • Customized previewer: A fully customized preview widget using Box UI Elements.

Direct Embed (iframe)

The direct embed link is a light-weight API method that provides limited options to customize the preview experience in your application. Due to the light-weight nature of the method, the API doesn't give you options to respond to client-side actions such as scrolling in the case of documents, play/pause interactivity for videos, rotating an image, etc.

There are two steps towards creating a direct <iframe> embed for Box View:

  1. Generate an embed URL for the file
  2. Add the embed URL to an <iframe>

Generate an embed URL for the file

To create a public file preview URL for a file that was uploaded to the app token application, you may either use a direct SDK method or make the request directly to the APIs.

When generating the embed URL directly from the APIs, use the Get File Information endpoint and request expiring_embed_link via the fields parameter.

curl \
    -H "authorization: Bearer [APP_TOKEN]"
String fileId = "12345678";
Uri embedUri = await client.FilesManager.GetPreviewLinkAsync(id: fileId);
String fileID = "12345678";
BoxFile file = new BoxFile(api, fileID);
URL embedLink = file.getPreviewLink();
file_id = '12345678'
embed_url = client.file(file_id).get_embed_url()
const fileId = '12345678';
client.files.getEmbedLink(fileId).then(embedURL => {
  // ...

Within the response object will be a public embed URL like the following:!YT_X1LauQ8ulDTad96hTl9xLCRYJ

For security reasons, the generated embed link will expire after 1 minute and should be immediately embedded in the app once generated.

Add the embed URL to an <iframe>

Within the HTML of your application, create an iframe elements with the src attribute set to the embed URL generated previously.

<iframe src="!ixgtCKQAziW

Customized Previewer (UI Elements)

To leverage advanced preview customization and event handling capabilities, the Box UI Preview Element is available.

To set up the Preview Element, start by installing the required components for the Content Preview Element.

Install Box Elements and Preview

When adding the JavaScript code to display a new previewer, the basic code will look something like the following:

var preview = new Box.Preview();"FILE_ID", "ACCESS_TOKEN", {
  container: ".preview-container",
  showDownload: true

To set up the Preview Element with a file stored within your App Token application, replace the placeholders in the code sample with the following:

  • FILE_ID: The ID of the file uploaded to the app token application, which may be obtained from the object returned when uploading the file.
  • ACCESS_TOKEN: The primary access token set up when configuring the application or a downscoped version of the token.

Due to the elevated privileges of the primary access token it's highly recommended that you use a downscoped version of the token in the Javascript code. See best practices for downscoping.