Tutorials
General
Robots
Getting Started
In this tutorial we are going to implement a minimal image resizing upload.
Lets start out by creating a simple upload form:
<form id="MyForm" action="http://api2.transloadit.com/assemblies" enctype="multipart/form-data" method="POST">
<input type="hidden" name="params" value="{"auth":{"key":"your key"},"steps":{"resize_image":{"robot":"\/image\/resize","width":320,"height":240,"result":true}},"redirect_url":"http:\/\/example.com\/upload"}" />
<input type="file" name="my_file" />
<input type="submit" value="Upload">
</form>
The form
Let's start looking at the form. As you can see the form has its action setup to post any contained files to http://api2.transloadit.com/assemblies. You can also see that the enctype is multipart/form-data, otherwise your browser would not know that this is a file upload.
The params field
The next element is a hidden field called params. The content of it is encoded in json and has all html entities escaped. Here is a more readable version of it.
{ "auth": {"key": "your key"}
, "steps":
{ "resize_image":
{ "robot": "/image/resize"
, "width": 320
, "height": 240
, "result": true
}
, "redirect_url": "http://example.com/upload"
}
You need to replace "your key" with the actual auth key from your My Account -> API credentials page.
The steps object contains a list of things to do with any uploaded file. In this case we are just defining a single step called "resize_image", which uses the /image/resize robot to resize any incoming image to 320 x 240 pixel.
Usually a step like this would be followed by another /s3/store step, but in this case we are manually telling transloadit that we care about the result of this operation, which will yield a temporary url to the resized file.
Finally the "redirect_url" needs to be replaced with a url of your application. It is important that this needs to be a fully qualified url, "/upload" alone will not work.
The file / submit input
The rest of the form is made up of a rather unspectacular file and submit input field.
Testing it
If you have copied the above form, and inserted your own API key, you should now be able to upload an image. Once the upload is complete, transloadit will redirect you to your "redirect_url" like this:
http://example.com/upload\
?assembly_id=907b53d8d16e600e857c16806b028e20\
&assembly_url=http://api2.maynard.transloadit.com/assemblies/907b53d8d16e600e857c16806b028e20
In order to get the current status of this assembly, you simply query the given assembly_url:
$ curl http://api2.maynard.transloadit.com/assemblies/907b53d8d16e600e857c16806b028e20
{ ok: 'ASSEMBLY_EXECUTING'
, message: 'The assembly is currently being executed.'
, assembly_id: '907b53d8d16e600e857c16806b028e20'
, assembly_url: 'http://api2.maynard.transloadit.com/assemblies/907b53d8d16e600e857c16806b028e20'
, bytes_received: 44037
, bytes_expected: 44037
, fields: {}
, uploads:
[ { id: 'cc43d04938855e26eaf4d56fa26f92db'
, name: 'my_image.png'
, ext: 'png'
, size: 43608
, mime: 'image/png'
, type: 'image'
, field: 'my_file'
, url: null
, meta:
{ width: 240
, height: 180
, ...
}
}
]
, results: {}
}
A more convenient way to find out about the results of an assembly is to provide a notify_url.
Next Steps
Here is a list of things you may want to read about next:
