
Serve files to web browsers (beta)
🤖/file/serve serves files to web browsers.
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, as you
can see in the headers
parameter, we instruct browsers to cache the result for 72h (259200
seconds) and CDNs to cache the content for 24h (86400
seconds). These values should be adjusted to
suit your use case.
🤖/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.
More information on:
- Content Delivery.
- 🤖/file/serve pricing.
- 🤖/tlcdn/deliver pricing.
Parameters
-
use
String / Array of Strings / ObjectrequiredSpecifies 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" ]
💡 That’s likely all you need to know about
use
, but you can view advanced use cases:› Advanced use cases
-
Step bundling. Some Robots can gather several Step results for a single invocation. For example, 🤖/file/compress would normally create one archive for each file passed to it. If you'd set
bundle_steps
to true, however, it will create one archive containing all the result files from all Steps you give it. To enable bundling, provide an object like the one below to theuse
parameter:"use": { "steps": [ ":original", "encoded", "resized" ], "bundle_steps": true }
This is also a crucial parameter for 🤖/video/adaptive, otherwise you'll generate 1 playlist for each viewing quality.
Keep in mind that all input Steps must be present in your Template. If one of them is missing (for instance it is rejected by a filter), no result is generated because the Robot waits indefinitely for all input Steps to be finished.Here’s a demo that showcases Step bundling.
-
Group by original. Sticking with 🤖/file/compress example, you can set
group_by_original
totrue
, in order to create a separate archive for each of your uploaded or imported files, instead of creating one archive containing all originals (or one per resulting file). This is important for for 🤖/media/playlist where you'd typically set:"use": { "steps": [ "segmented" ], "bundle_steps": true, "group_by_original": true }
-
Fields. You can be more discriminatory by only using files that match a field name by setting the
fields
property. When this array is specified, the corresponding Step will only be executed for files submitted through one of the given field names, which correspond with the strings in thename
attribute of the HTML file input field tag for instance. When using a back-end SDK, it corresponds withmyFieldName1
in e.g.:$transloadit->addFile('myFieldName1', './chameleon.jpg')
.This parameter is set to
true
by default, meaning all fields are accepted.Example:
"use": { "steps": [ ":original" ], "fields": [ "myFieldName1" ] }
-
Use as. Sometimes Robots take several inputs. For instance, 🤖/video/merge can create a slideshow from audio and images. You can map different Steps to the appropriate inputs.
Example:
"use": { "steps": [ { "name": "audio_encoded", "as": "audio" }, { "name": "images_resized", "as": "image" } ] }
Sometimes the ordering is important, for instance, with our concat Robots. In these cases, you can add an index that starts at 1. You can also optionally filter by the multipart field name. Like in this example, where all files are coming from the same source (end-user uploads), but with different
<input>
names:Example:
"use": { "steps": [ { "name": ":original", "fields": "myFirstVideo", "as": "video_1" }, { "name": ":original", "fields": "mySecondVideo", "as": "video_2" }, { "name": ":original", "fields": "myThirdVideo", "as": "video_3" } ] }
For times when it is not apparent where we should put the file, you can use Assembly Variables to be specific. For instance, you may want to pass a text file to 🤖/image/resize to burn the text in an image, but you are burning multiple texts, so where do we put the text file? We specify it via
${use.text_1}
, to indicate the first text file that was passed.Example:
"watermarked": { "robot": "/image/resize", "use" : { "steps": [ { "name": "resized", "as": "base" }, { "name": "transcribed", "as": "text" }, ], }, "text": [ { "text" : "Hi there", "valign": "top", "align" : "left", }, { "text" : "From the 'transcribed' Step: ${use.text_1}", "valign" : "bottom", "align" : "right", "x_offset": 16, "y_offset": -10, } ] }
-
-
headers
Object ⋅ default:{ "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Cache-Control, Accept, Content-Length, Transloadit-Client, Authorization", "Access-Control-Allow-Methods": "POST, GET, PUT, DELETE, OPTIONS", "Access-Control-Allow-Origin" : "*", "Cache-Control": "public, max-age=259200, s-max-age=86400", "Content-Type": "${file.mime}; charset=utf-8", "Transfer-Encoding": "chunked", "Transloadit-Assembly": "…", "Transloadit-RequestID": "…" }
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.
Related blog posts
- Screenshot any website in seconds May 11, 2022
- Let's Build: An Image Alt-Text Generator May 9, 2022
- Our Smart CDN now supports AI Face Detection! June 21, 2022