Multipart Form

Even though we recommend Uppy, to showcase basic concepts, do a quick prototype, or in case you really do want to offer a fallback for browsers where JavaScript is disabled or crashed, you can integrate Transloadit using nothing more but a multipart <form>.

Install

There is nothing to install 👌

Usage

Set the form's action attribute to "https://api2.transloadit.com/assemblies". Files are then uploaded directly to our API, along with any Instructions inside a hidden params field.

To avoid any parsing issues in the browser, we should let a computer JSON encode the instructions and then escape HTML entities such as: < and " to < and ". The result is a little hard for a human to parse, so maybe don't even try 😄

You can set a redirect_url inside the Instructions to tell our API to redirect the browser to a success page of your choosing when all is done. We'll append: ?assembly_id=xyz&assembly_ssl_url=https://api2.transloadit.com/assemblies/xyz to that URL.

When serving out the success page, your back-end could parse these query parameters so you can do further handling like downloading the Assembly Status JSON and the encoding results it refers to.

The success page is served to the browser as soon as the upload completes, so the Assembly may actually still be executing (encoding a large video for instance). You could either poll the assembly_ssl_url with your back-end, or you could set up Assembly Notifications and provide a notify_url with your Instructions. In that case we will POST the Assembly Status JSON to it so you can handle the results with your back-end that way.

Example

<!--
We'll be inlining the following Assembly Instructions into a hidden params field,
escaping HTML entities such as &lt;, a task best left to machines :)

{
  "redirect_url": "https://example.com/success",
  "auth": {
    "key": "YOUR_TRANSLOADIT_KEY"
  },
  "template_id": "YOUR_TEMPLATE_ID",
  "steps": {}
}
-->

<form
  method="POST"
  enctype="multipart/form-data"
  action="https://api2.transloadit.com/assemblies"
>
  <input
    type="hidden"
    name="params"
    value="%7B%0A%20%20%22redirect_url%22%3A%20%22https%3A%2F%2Fexample.com%2Fsuccess%22%2C%0A%20%20%22auth%22%3A%20%7B%0A%20%20%20%20%22key%22%3A%20%22YOUR_TRANSLOADIT_KEY%22%0A%20%20%7D%2C%0A%20%20%22template_id%22%3A%20%22YOUR_TEMPLATE_ID%22%2C%0A%20%20%22steps%22%3A%20%7B%7D%0A%7D"
  />
  <input type="file" name="myfile_1" multiple="multiple" />
  <input type="submit" value="Upload" />
</form>