Multipart Form

We originally built this approach to avoid the need to have JavaScript enabled in the browser. Times have changed and one can now assume that JavaScript is turned on in the browser, so we recommend using Uppy as the browser integration of choice.

That being said, 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>.

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>