beta

# Generate a preview thumbnail

🤖/file/preview generates a thumbnail for any uploaded file to preview its content, similar to the thumbnails in desktop file managers.

![/file/preview Robot](/assets/images/robots/240x240/file-preview.png)

This Robot's purpose is to generate a meaningful preview image for any file, in such a way that the resulting thumbnail highlights the file's content. The goal is not to losslessly present the original media in a smaller way. Instead, it is to maximize the chance of a person recognizing the media at a glance, while being visually pleasing and consistent with other previews. The generation process depends on the file type. For example, the Robot can extract artwork from media files, frames from videos, generate a waveform for audio files, and preview the content of documents and images. The details of all available strategies are provided in the next section.

If no file-specific thumbnail can be generated because the file type is not supported, a generic icon containing the file extension will be generated.

The default parameters ensure that the Robot always generates a preview image with the predefined dimensions and formats, to allow an easy integration into your application's UI. In addition, the generated preview images are optimized by default to reduce their file size while keeping their quality.

<span aria-hidden="true" id="usage-example"></span>

## Usage example

Generate a preview thumbnail for any uploaded file:

```
{
  "steps": {
    "previewed": {
      "robot": "/file/preview",
      "use": ":original",
      "height": 400,
      "width": 300,
      "format": "png"
    }
  }
}
```

<span aria-hidden="true" id="parameters"></span>

## Parameters

* <span aria-hidden="true" id="interpolate"></span>

### `interpolate`

`boolean | Record<string, boolean>`\
Controls whether Assembly Variables are interpolated for individual instruction fields.\
By default, most Robot instruction fields interpolate Assembly Variables. Set this to `false` to treat every instruction field as literal text, or set an individual field path to `false` to treat only that field as literal text. For Robot-specific fields that are literal by default, set this to `true` or set that field path to `true` to opt back into interpolation.\
Use field names such as `path`, or dotted paths such as `ffmpeg.vf` for nested objects.

* <span aria-hidden="true" id="output_meta"></span>

### `output_meta`

`Record<string, boolean> | boolean | Array<string>`\
Allows you to specify a set of metadata that is more expensive on CPU power to calculate, and thus is disabled by default to keep your Assemblies processing fast.\
For images, you can add `"has_transparency": true` in this object to extract if the image contains transparent parts and `"dominant_colors": true` to extract an array of hexadecimal color codes from the image.\
For images, you can also add `"blurhash": true` to extract a [BlurHash⁠](https://blurha.sh) string — a compact representation of a placeholder for the image, useful for showing a blurred preview while the full image loads.\
For videos, you can add the `"colorspace": true` parameter to extract the colorspace of the output video.\
For videos, you can also add `"interlaced": true` to detect whether the video is interlaced. This combines the cheap ffprobe `field_order` flag with a bounded `idet` sampling pass over the first frames of the source, exposing `interlaced`, `field_order`, and a diagnostic `interlace_detection` object under `file.meta`. This is computationally expensive and billed accordingly.\
For audio, you can add `"mean_volume": true` to get a single value representing the mean average volume of the audio file.\
You can also set this to `false` to skip metadata extraction and speed up transcoding.

* <span aria-hidden="true" id="user_meta"></span>

### `user_meta`

`Record<string, any>`(default: `{}`)\
Adds custom metadata to each file emitted by this Robot without modifying the file’s contents.\
The values are merged with any existing `user_meta` carried by the input file. If both objects contain the same key, this Robot’s value takes precedence. Assembly Variables are supported, for example `{ "internal_file_id": "${file.id}" }`.

* <span aria-hidden="true" id="result"></span>

### `result`

`boolean`(default: `false`)\
Whether the results of this Step should be present in the Assembly Status JSON

* <span aria-hidden="true" id="queue"></span>

### `queue`

`batch`\
Setting the queue to 'batch', manually downgrades the priority of jobs for this step to avoid consuming Priority job slots for jobs that don't need zero queue waiting times

* <span aria-hidden="true" id="force_accept"></span>

### `force_accept`

`boolean`(default: `false`)\
Force a Robot to accept a file type it would have ignored.\
By default, Robots ignore files they are not familiar with.[🤖/video/encode](/docs/robots/video-encode.md), for example, will happily ignore input images.\
With the `force_accept` parameter set to `true`, you can force Robots to accept all files thrown at them. This will typically lead to errors and should only be used for debugging or combatting edge cases.

* <span aria-hidden="true" id="ignore_errors"></span>

### `ignore_errors`

`boolean | Array<meta | execute>`(default: `[]`)\
Ignore errors during specific phases of processing.\
Setting this to `["meta"]` will cause the Robot to ignore errors during metadata extraction.\
Setting this to `["execute"]` will cause the Robot to ignore errors during the main execution phase.\
Setting this to `true` is equivalent to `["meta", "execute"]` and will ignore errors in both phases.

* <span aria-hidden="true" id="use"></span>

### `use`

`string | Array<string> | Array<object> | object`\
Specifies which Step(s) to use as input.

* You can pick any names for Steps except `":original"` (reserved for user uploads handled by Transloadit)
* You can provide several Steps as input with arrays:

```json
{  
  "use": [  
    ":original",  
    "encoded",  
    "resized"  
  ]  
}  
```

* You can also tag input Steps with `as` to pass semantic intent to robots:

```json
{  
  "use": [  
    {  
      "name": ":original",  
      "as": "image"  
    },  
    {  
      "name": ":original",  
      "as": "mask"  
    }  
  ]  
}  
```

**Tip**\
That's likely all you need to know about `use`, but you can view [Advanced use cases](/docs/topics/use-parameter.md).

* <span aria-hidden="true" id="format"></span>

### `format`

`avif | gif | jpeg | jpg | png | webp`(default: `"png"`)\
The output format for the generated thumbnail image. AVIF and WebP are also supported. If a short video clip is generated using the `clip` strategy, its format is defined by `clip_format`.

* <span aria-hidden="true" id="width"></span>

### `width`

`number`(default: `300`)\
Width of the thumbnail, in pixels.

* <span aria-hidden="true" id="height"></span>

### `height`

`number`(default: `200`)\
Height of the thumbnail, in pixels.

* <span aria-hidden="true" id="resize_strategy"></span>

### `resize_strategy`

`crop | fit | fillcrop | min_fit | pad | stretch`(default: `"pad"`)\
To achieve the desired dimensions of the preview thumbnail, the Robot might have to resize the generated image. This happens, for example, when the dimensions of a frame extracted from a video do not match the chosen `width` and `height` parameters.\
See the list of available [resize strategies](/docs/topics/resize-strategies.md) for more details.

* <span aria-hidden="true" id="background"></span>

### `background`

`string`(default: `"#ffffffff"`)\
The hexadecimal code of the color used to fill the background (only used for the pad resize strategy). The format is `#rrggbb[aa]` (red, green, blue, alpha). Use `#00000000` for a transparent padding.

* <span aria-hidden="true" id="zoom"></span>

### `zoom`

`boolean`(default: `true`)\
If set to `false`, smaller images will not be stretched to the desired `width` and `height`. This is useful if you want to retain the original image dimensions and only limit the output to a maximum size. For details about the impact of zooming for your preferred resize strategy, see the list of available [resize strategies](/docs/topics/resize-strategies.md).\
Note that this parameter only affects strategies that produce a still image. Animated clips generated by the `clip` strategy are not affected.

* <span aria-hidden="true" id="strategy"></span>

### `strategy`

`object`\
Definition of the thumbnail generation process per file category. The parameter must be an object whose keys can be one of the file categories: `audio`, `video`, `image`, `document`, `archive`, `webpage`, and `unknown`. The corresponding value is an array of strategies for the specific file category. See the above section for a list of all available strategies.\
For each file, the Robot will attempt to use the first strategy to generate the thumbnail. If this process fails (e.g., because no artwork is available in a video file), the next strategy is attempted. This is repeated until either a thumbnail is generated or the list is exhausted. Selecting the `icon` strategy as the last entry provides a fallback mechanism to ensure that an appropriate strategy is always available.\
The parameter defaults to the following definition:

```json
{  
  "audio": ["artwork", "waveform", "icon"],  
  "video": ["artwork", "frame", "icon"],  
  "document": ["page", "icon"],  
  "image": ["image", "icon"],  
  "webpage": ["render", "icon"],  
  "archive": ["icon"],  
  "unknown": ["icon"]  
}  
```

* <span aria-hidden="true" id="artwork_outer_color"></span>

### `artwork_outer_color`

`string`\
The color used in the outer parts of the artwork's gradient.

* <span aria-hidden="true" id="artwork_center_color"></span>

### `artwork_center_color`

`string`\
The color used in the center of the artwork's gradient.

* <span aria-hidden="true" id="waveform_center_color"></span>

### `waveform_center_color`

`string`(default: `"#000000ff"`)\
The color used in the center of the waveform's gradient. The format is `#rrggbb[aa]` (red, green, blue, alpha). Only used if the `waveform` strategy for audio files is applied.

* <span aria-hidden="true" id="waveform_outer_color"></span>

### `waveform_outer_color`

`string`(default: `"#000000ff"`)\
The color used in the outer parts of the waveform's gradient. The format is `#rrggbb[aa]` (red, green, blue, alpha). Only used if the `waveform` strategy for audio files is applied.

* <span aria-hidden="true" id="waveform_height"></span>

### `waveform_height`

`string | number`(default: `100`)\
Height of the waveform, in pixels. Only used if the `waveform` strategy for audio files is applied. It can be utilized to ensure that the waveform only takes up a section of the preview thumbnail.

* <span aria-hidden="true" id="waveform_width"></span>

### `waveform_width`

`string | number`(default: `300`)\
Width of the waveform, in pixels. Only used if the `waveform` strategy for audio files is applied. It can be utilized to ensure that the waveform only takes up a section of the preview thumbnail.

* <span aria-hidden="true" id="icon_style"></span>

### `icon_style`

`square | with-text`(default: `"with-text"`)\
The style of the icon generated if the `icon` strategy is applied. The default style, `with-text`, includes an icon showing the file type and a text box below it, whose content can be controlled by the `icon_text_content` parameter and defaults to the file extension (e.g. MP4, JPEG). The `square` style only includes a square variant of the icon showing the file type. Below are exemplary previews generated for a text file utilizing the different styles:

**`with-text` style:**\
![Image with text style](/assets/images/file-preview/icon-with-text.png)

**`square` style:**\
![Image with square style](/assets/images/file-preview/icon-square.png)

* <span aria-hidden="true" id="icon_text_color"></span>

### `icon_text_color`

`string`(default: `"#a2a2a2"`)\
The color of the text used in the icon. The format is `#rrggbb[aa]`. Only used if the `icon` strategy is applied.

* <span aria-hidden="true" id="icon_text_font"></span>

### `icon_text_font`

`string`(default: `"Roboto"`)\
The font family of the text used in the icon. Only used if the `icon` strategy is applied. [Here](/docs/supported-formats/fonts.md) is a list of all supported fonts.

* <span aria-hidden="true" id="icon_text_content"></span>

### `icon_text_content`

`extension | none`(default: `"extension"`)\
The content of the text box in generated icons. Only used if the `icon_style` parameter is set to `with-text`. The default value, `extension`, adds the file extension (e.g. MP4, JPEG) to the icon. The value `none` can be used to render an empty text box, which is useful if no text should not be included in the raster image, but some place should be reserved in the image for later overlaying custom text over the image using HTML etc.

* <span aria-hidden="true" id="optimize"></span>

### `optimize`

`boolean`(default: `true`)\
Specifies whether the generated preview image should be optimized to reduce the image's file size while keeping their quaility. If enabled, the images will be optimized using [🤖/image/optimize](/docs/robots/image-optimize.md).

* <span aria-hidden="true" id="optimize_priority"></span>

### `optimize_priority`

`compression-ratio | conversion-speed`(default: `"conversion-speed"`)\
Specifies whether conversion speed or compression ratio is prioritized when optimizing images. Only used if `optimize` is enabled. Please see the [🤖/image/optimize documentation](/docs/robots/image-optimize.md#param-priority) for more details.

* <span aria-hidden="true" id="optimize_progressive"></span>

### `optimize_progressive`

`boolean`(default: `false`)\
Specifies whether images should be interlaced, which makes the result image load progressively in browsers. Only used if `optimize` is enabled. Please see the [🤖/image/optimize documentation](/docs/robots/image-optimize.md#param-progressive) for more details.

* <span aria-hidden="true" id="clip_format"></span>

### `clip_format`

`apng | avif | gif | webp`(default: `"webp"`)\
The animated image format for the generated video clip. Only used if the `clip` strategy for video files is applied.\
Please consult the [MDN Web Docs⁠](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image%5Ftypes) for detailed information about the image formats and their characteristics. GIF enjoys the broadest support in software, but only supports a limit color palette. APNG supports a variety of color depths, but its lossless compression produces large images for videos. AVIF is a modern image format that offers great compression, but proper support for animations is still lacking in some browsers. WebP on the other hand, enjoys broad support while offering a great balance between small file sizes and good visual quality, making it the default clip format.

* <span aria-hidden="true" id="clip_offset"></span>

### `clip_offset`

`string | number`(default: `1`)\
The start position in seconds of where the clip is cut. Only used if the `clip` strategy for video files is applied. Be aware that for larger video only the first few MBs of the file may be imported to improve speed. Larger offsets may seek to a position outside of the imported part and thus fail to generate a clip.

* <span aria-hidden="true" id="clip_duration"></span>

### `clip_duration`

`string | number`(default: `5`)\
The duration in seconds of the generated video clip. Only used if the `clip` strategy for video files is applied. Be aware that a longer clip duration also results in a larger file size, which might be undesirable for previews.

* <span aria-hidden="true" id="clip_framerate"></span>

### `clip_framerate`

`string | number`(default: `5`)\
The framerate of the generated video clip. Only used if the `clip` strategy for video files is applied. Be aware that a higher framerate appears smoother but also results in a larger file size, which might be undesirable for previews.

* <span aria-hidden="true" id="clip_loop"></span>

### `clip_loop`

`boolean`(default: `true`)\
Specifies whether the generated animated image should loop forever (`true`) or stop after playing the animation once (`false`). Only used if the `clip` strategy for video files is applied.

<span aria-hidden="true" id="related-blog-posts"></span>

## Related blog posts

* [Smart CDN previews: lower costs and latency](/blog/2024/06/file-preview-with-smart-cdn.md) June 17, 2024
* [Generating meaningful file previews](/blog/2025/01/file-preview.md) January 14, 2025
