> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create File Preview

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

<RelatedLinks
  title="REQUIRED GUIDES"
  items={[
{ label: translate("Setup"), href: "/guides/embed/box-view/setup", badge: "GUIDE" },
{ label: translate("Upload Files"), href: "/guides/embed/box-view/upload-file", badge: "GUIDE" },
{ label: translate("Installation"), href: "/guides/embed/ui-elements/installation", badge: "GUIDE" },
{ label: translate("Content Preview"), href: "/guides/embed/ui-elements/preview", badge: "GUIDE" }
]}
/>

Once a file is uploaded to the application, it can 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 <Link href="/guides/embed/ui-elements">UI Elements</Link>.

## Direct Embed (`iframe`)

The direct embed link 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 to create 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 application, you may either use a direct SDK method or make the request
directly to the APIs.

<Note>
  When generating the embed URL directly from the APIs, use the
  <Link href="/reference/get-files-id">Get File Information endpoint</Link> and request
  `expiring_embed_link` via the `fields` parameter.
</Note>

<CodeGroup>
  ```sh cURL theme={null}
  curl https://api.box.com/2.0/files/FILE_ID?fields=expiring_embed_link \
      -H "authorization: Bearer [ACCESS_TOKEN]"
  ```

  ```csharp .NET theme={null}
  String fileId = "12345678";
  Uri embedUri = await client.FilesManager.GetPreviewLinkAsync(id: fileId);
  ```

  ```java Java theme={null}
  String fileID = "12345678";
  BoxFile file = new BoxFile(api, fileID);
  URL embedLink = file.getPreviewLink();
  ```

  ```python Python theme={null}
  file_id = '12345678'
  embed_url = client.file(file_id).get_embed_url()
  ```

  ```js Node theme={null}
  const fileId = '12345678';
  client.files.getEmbedLink(fileId).then(embedURL => {
      // ...
  });
  ```
</CodeGroup>

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

```shell theme={null}
https://app.box.com/preview/expiring_embed/gvoct6FE!YT_X1LauQ8ulDTad96hTl9xLCRYJ
5iU6O61KxiduxFIgX9HSWMcCWf7zju1XkEsf6-Ul2qtKXeaFeKPT4SysQJQdxrc144KgTIBuoI3bWMf4
cfhp3jdLYrK5hnr6KMq5H6r-AW31AcFtDJi1lnT0M4b3bvvZUaE2RRJGGINMauvS6MAT2luae5PvbFSx
Ctqqx6XlN6QrqbhfJc0UeJF9qwMv3-O8q5fWn0qr8OTY4lkeYidtTs3Ux...
```

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

### Add the embed URL to an `<iframe>`

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

```html theme={null}
<iframe src="https://app.box.com/preview/expiring_embed/gvoct6FE!ixgtCKQAziW
  9tHPm-jueq4cmS4GnL9RTJRcVEsK_3W8xcxtVo_v6gKpoXY45odgG1QrcjBVYZMrriUyGvcoSM
  SX8s-smpaFFYQik0R-PCKFtwvbv0lonid6ZfYNbuNFl2j9hOIqBccvHrdVor7i6WvOm6zELzTY
  4EWshcyYYBhDbJmYMrq61RtU_kvBe5P..."></iframe>
```

## Customized Previewer (UI Elements)

To leverage advanced preview customization and event handling capabilities, use
the Box <Link href="/guides/embed/ui-elements/preview">UI Preview Element</Link>.

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

<Card href={localizeLink("/guides/embed/ui-elements/installation")} arrow title="Install Box Elements and Preview" />

The basic code will resemble the below when adding the JavaScript code to
display a new previewer.

```js theme={null}
var preview = new Box.Preview();
preview.show("FILE_ID", "ACCESS_TOKEN", {
    container: ".preview-container",
    showDownload: true
});
```

Replace the placeholders in the code sample with the following:

* `FILE_ID`: The ID of the file uploaded to the application, which can 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.

<Warning>
  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
  <Link href="/guides/embed/box-view/best-practices#use-downscoped-tokens">best practices for downscoping</Link>.
</Warning>

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Create File Preview"), href: "/guides/embed/box-view/create-preview", badge: "GUIDE" }
]}
/>