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