Serve files to web browsers

Usage example

{
  "steps": {
    "resized": {
      "robot": "/image/resize",
      "use": ":original",
      "width": 800,
      "height": 450,
      "resize_strategy": "fit"
    },
    "served": {
      "robot": "/file/serve",
      "use": "resized",
      "cache_duration": 86400
    }
  }
}

Parameters

• interpolate

  boolean | Record<string, boolean>

• output_meta

  Record<string, boolean> | boolean | Array<string>

• result

  boolean (default: false)

• queue

  batch

• force_accept

  boolean (default: false)

• ignore_errors

  boolean | Array<meta | execute> (default: [])

• use

  string | Array<string> | Array<object> | object

• cache_duration

  string | number

• headers

  Record<string, string> (default: {"Access-Control-Allow-Headers":"X-Requested-With, Content-Type, Cache-Control, Accept, Content-Length, Transloadit-Client, Authorization, Range, If-Range","Access-Control-Allow-Methods":"POST, GET, PUT, DELETE, OPTIONS","Access-Control-Allow-Origin":"*","Access-Control-Expose-Headers":"Transloadit-Assembly-URL, Content-Range, Content-Length, Accept-Ranges","Cache-Control":"public, max-age=259200, s-maxage=86400","Content-Type":"${file.mime}; charset=utf-8","Transloadit-Assembly":"…","Transloadit-RequestID":"…","Accept-Ranges":"bytes"})

Related blog posts

When you want Transloadit to tranform files on the fly, you can use this Robot to determine which Step of a Template should be served to the end-user (via a CDN), as well as set extra information on the served files, such as headers. This way you can for instance suggest the CDN for how long to keep cached copies of the result around. By default, we instruct browsers to cache the result for 72h (259200 seconds) and CDNs to cache the content for 24h (86400 seconds). Use the cache_duration parameter to customize both values at once.

🤖/file/serve merely acts as the glue layer between our Assembly engine and serving files over HTTP. It let's you pick the proper result of a series of Steps via the use parameter and configure headers on the original content. That is where its responsibilies end, and 🤖/tlcdn/deliver, then takes over to globally distribute this original content across the globe, and make sure that is cached close to your end-users, when they make requests such as https://my-app.tlcdn.com/resize-img/canoe.jpg?w=500, another. 🤖/tlcdn/deliver is not a part of your Assembly Instructions, but it may appear on your invoices as bandwidth charges incur when distributing the cached copies. 🤖/file/serve only charges when the CDN does not have a cached copy and requests to regenerate the original content, which depending on your caching settings could be just once a month, or year, per file/transformation.

While theoretically possible, you could use 🤖/file/serve directly in HTML files, but we strongly recommend against this, because if your site gets popular and the media URL that /file/serve is handling gets hit one million times, that is one million new image resizes. Wrapping it with a CDN (and thanks to the caching that comes with it) makes sure encoding charges stay low, as well as latencies.

Also consider configuring caching headers and cache-control directives to control how content is cached and invalidated on the CDN edge servers, balancing between freshness and efficiency.

Smart CDN security with signed URLs

You can leverage signed Smart CDN URLs to avoid abuse of our encoding platform. Below is a quick Node.js example using our Node SDK, but there are examples for other languages and SDKs as well.

// yarn add transloadit
// or
// npm install --save transloadit

import { Transloadit } from 'transloadit'

const transloadit = new Transloadit({
  authKey: 'YOUR_TRANSLOADIT_KEY',
  authSecret: 'YOUR_TRANSLOADIT_SECRET',
})

const url = transloadit.getSignedSmartCDNUrl({
  workspace: 'YOUR_WORKSPACE',
  template: 'YOUR_TEMPLATE',
  input: 'image.png',
  urlParams: { height: 100, width: 100 },
})

console.log(url)

This will generate a signed Smart CDN URL that includes authentication parameters, preventing unauthorized access to your transformation endpoints.

For new integrations, use the modern sig + exp format. Legacy s signatures are deprecated. Also note that the expiration window is the practical cache window for signed results: shorter expirations tighten access control, while longer expirations improve cache reuse and lower encoding volume.

More information

• Content Delivery
• 🤖/file/serve pricing
• 🤖/tlcdn/deliver pricing
• File Preview Feature blog post

Serve transformed files with explicit browser and CDN cache duration:

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.

Whether the results of this Step should be present in the Assembly Status JSON

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

Force a Robot to accept a file type it would have ignored.

By default, Robots ignore files they are not familiar with. 🤖/video/encode, 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.

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.

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:
  

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

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

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

An optional duration in seconds that the served file should be cached. When set, this value is used for both the max-age (browser cache) and s-maxage (shared/CDN cache) directives in the Cache-Control header, overriding the defaults. For example, setting cache_duration to 43200 would cache the file for 12 hours.

This is useful for controlling data retention in CDNs. For instance, if your temporary files are deleted after 24 hours, you can set cache_duration to 86400 to ensure cached copies also expire within that window.

An object containing a list of headers to be set for a file as we serve it to a CDN/web browser, such as { FileURL: "${file.url_name}" } which will be merged over the defaults, and can include any available Assembly Variable.

The Accept-Ranges: bytes header advertises that HTTP range requests are supported for seekable media playback. This relies on Transloadit's storage backends (S3, GCS, etc.) all honoring Range request headers. The CORS headers include Range and If-Range in Access-Control-Allow-Headers to permit cross-origin range requests, and expose Content-Range, Content-Length, and Accept-Ranges via Access-Control-Expose-Headers so browser JavaScript can read these values.

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