Transloadit: File Uploading, Conversion & Processing for websites/apps

Import and export to any of these services

Easy integration

Platforms

RestAPI
cURL
iOS & macOS
jQuery
HTML5
Node.js
CLI
PHP
Ruby
Python
Go
Java

There's more...

Apart from these, there are integrations for Android, HTML2, Rails, Zapier, and many community projects

RestAPI

Instead of sending Assembly Instructions directly to Transloadit, you can also save them in a secured way as a Template. You can then refer to the template_id in your requests, making sure that secrets and Instructions no longer have to be transmitted, which is a security risk in many cases.

Here is a 'raw' Template, in case you would like to save these Instructions safely in your account, or use these Instructions to talk directly to our REST API without using any SDK.

{
  "thumb": {
    "use": ":original",
    "robot": "/image/resize",
    "width": 75,
    "height": 75,
    "resize_strategy": "fit"
  }
}

cURL

Read docs: cURL

We would not recommend to use the cURL integration for production, but it can be convenient for a quick test when you don't have an SDK lying around.

# Prerequisites: brew install curl jq || sudo apt install curl jq
# To avoid tampering, use Signature Authentication
echo '{
  "auth": {
    "key": "YOUR_TRANSLOADIT_KEY"
  },
  "steps": {
    "thumb": {
      "use": ":original",
      "robot": "/image/resize",
      "width": 75,
      "height": 75,
      "resize_strategy": "fit"
    }
  }
}' |curl \
    --request POST \
    --form 'params=<-' \
    --form my_file1=@./chameleon.jpg \
  https://api2.transloadit.com/assemblies \
|jq

iOS & macOS

Read docs: TransloaditKit

It's easy to start using Transloadit in Objective-C and Swift using CocoaPods or Carthage and leverage file uploading & encoding in macOS and iOS apps.

// Add 'Transloadit' to your Podfile, run 'pod install', add credentials to 'Info.plist'
import Arcane
import TransloaditKit

// Set Encoding Instructions
var AssemblySteps: Array = Array<Step>() // An array to hold the Steps

var Step1 = Step (key: "thumb") // Create a Step object
Step1?.setValue(":original", forOption: "use") // Add the details
Step1?.setValue("/image/resize", forOption: "robot") // Add the details
Step1?.setValue(75, forOption: "width") // Add the details
Step1?.setValue(75, forOption: "height") // Add the details
Step1?.setValue("fit", forOption: "resize_strategy") // Add the details
AssemblySteps.append(Step1) // Add the Step to the array

// We then create an Assembly Object with the Steps and files
var MyAssembly: Assembly = Assembly(steps: AssemblySteps, andNumberOfFiles: 1)

// Add files to upload
MyAssembly.addFile("./chameleon.jpg")

// Start the Assembly
Transloadit.createAssembly(MyAssembly) 

// Fires after your Assembly has completed
transloadit.assemblyStatusBlock = {(_ completionDictionary: [AnyHashable: Any]) -> Void in
  print("\(completionDictionary.description)")
}

jQuery

Read docs: jQuery SDK

Until Uppy reached 1.0, our jQuery SDK was the recommended way to integrate Transloadit with web browsers. This is no longer the case and we'd now like everybody to use Uppy instead. The form method of the Robodog Plugin offers a very easy migration for jQuery SDK users.

<body>
  <form action="/uploads" enctype="multipart/form-data" method="POST">
    <input type="file" name="my_file" multiple="multiple" />
  </form>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js"></script>
  <script type="text/javascript">
  $(function() {
    $('form').transloadit({
      wait: true,
      triggerUploadOnFileSelection: true,
      params: {
        auth: {
          // To avoid tampering use signatures:
          // https://transloadit.com/docs/api/#authentication
          key: 'YOUR_TRANSLOADIT_KEY',
        },
        // It's often better store encoding instructions in your account
        // and use a `template_id` instead of adding these steps inline
        steps: {
          thumb: {
            use: ':original',
            robot: '/image/resize',
            width: 75,
            height: 75,
            resize_strategy: 'fit'
          }
        }
      }
    });
  });
  </script>
</body>

HTML5

Read docs: Uppy File Uploader

Uppy is an open source file uploader for web browsers by Transloadit. With over 23,000 stargazers on GitHub it is the #1 file uploader in the world. Uploads can survive network hiccups, browser crashes, and accidental navigate-aways thanks to Tus support built-in, and it is the recommended way to integrate Transloadit with web browsers.

<!-- This pulls Uppy from our CDN. Alternatively use `npm i @uppy/robodog --save` -->
<!-- if you want smaller self-hosted bundles and/or to use modern JavaScript -->
<link href="//releases.transloadit.com/uppy/robodog/v1.6.7/robodog.min.css" rel="stylesheet">
<script src="//releases.transloadit.com/uppy/robodog/v1.6.7/robodog.min.js"></script>
<button id="browse">Select Files</button>
<script>
  document.getElementById('browse').addEventListener('click', function () {
    var uppy = window.Robodog.pick({
      providers: [ 'instagram', 'url', 'webcam', 'dropbox', 'google-drive', 'facebook', 'onedrive' ],
      waitForEncoding: true,
      params: {
        // To avoid tampering, use Signature Authentication
        auth: { key: 'YOUR_TRANSLOADIT_KEY' },
        // To hide your `steps`, use a `template_id` instead
        steps: {
          thumb: {
            use: ':original',
            robot: '/image/resize',
            width: 75,
            height: 75,
            resize_strategy: 'fit'
          }
        }
      }
    }).then(function (bundle) {
      // Due to `waitForEncoding: true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      // for Async Mode where your back-end receives the encoding results
      // so that your user can be on their way as soon as the upload completes.
      console.log(bundle.transloadit) // Array of Assembly Statuses
      console.log(bundle.results)     // Array of all encoding results
    }).catch(console.error)
  })
</script>

Node.js

Read docs: Node SDK

We have a fully featured software development kit for Node.js, so you can easily integrate it into your node apps.

// yarn add transloadit || npm i transloadit --save-exact
const Transloadit = require('transloadit')

const transloadit = new Transloadit({
  authKey: 'YOUR_TRANSLOADIT_KEY',
  authSecret: 'YOUR_TRANSLOADIT_SECRET'
})

// Set Encoding Instructions
const options = {
  params: {
    steps: {
      thumb: {
        use: ':original',
        robot: '/image/resize',
        width: 75,
        height: 75,
        resize_strategy: 'fit',
      },
    }
  }
}

// Add files to upload
transloadit.addFile('myfile_1', './chameleon.jpg')

// Start the Assembly
transloadit.createAssembly(options, (err, result) => {
  if (err) {
    throw err
  }

  console.log({result})
})

CLI

Read docs: Transloadify

Don't feel like coding? Use our command line tool to watch an ./input/ directory for incoming files and automatically convert them through instructions that you saved locally in: ./steps.json.

The results will be saved in the ./output/ directory.

You can optionally automatically remove successfully processed input files.

[sudo] npm install transloadify -g

export TRANSLOADIT_KEY="YOUR_TRANSLOADIT_KEY"
export TRANSLOADIT_SECRET="YOUR_TRANSLOADIT_SECRET"

# Save Encoding Instructions
echo '{
  "thumb": {
    "use": ":original",
    "robot": "/image/resize",
    "width": 75,
    "height": 75,
    "resize_strategy": "fit"
  }
}' > ./steps.json

transloadify \
  --input "./chameleon.jpg" \
  --output "./output.example" \
  --steps "./steps.json"

PHP

Read docs: PHP SDK

Our PHP SDK allows you to automate the uploading of files through the Transloadit REST API using PHP.

It can be installed via composer.

// composer require transloadit/php-sdk
use transloadit\Transloadit;
$transloadit = new Transloadit([
  "key" => "YOUR_TRANSLOADIT_KEY",
  "secret" => "YOUR_TRANSLOADIT_SECRET",
]);

// Add files to upload
$files = [];
array_push($files, "./chameleon.jpg")

// Start the Assembly
$response = $transloadit->createAssembly([
  "files" => $files, 
  "params" => [
    "steps" => [
      "thumb" => [
        "use" => ":original",
        "robot" => "/image/resize",
        "width" => 75,
        "height" => 75,
        "resize_strategy" => "fit",
      ],
    ],
  ],
]);

Ruby

Read docs: Ruby SDK

Our Ruby Gem allows you to automate the uploading of files through the Transloadit REST API.

If you run Ruby on Rails and are instead looking to integrate with the browser to handle file uploads, then we also have a Ruby on Rails SDK ready for you to use.

# gem install transloadit
transloadit = Transloadit.new(
  :key => "YOUR_TRANSLOADIT_KEY",
  :secret => "YOUR_TRANSLOADIT_SECRET"
)

# Set Encoding Instructions
thumb = transloadit.step "thumb", "/image/resize",
  :use => ":original",
  :width => 75,
  :height => 75,
  :resize_strategy => "fit"
)

assembly = transloadit.assembly(
  :steps => [ thumb ]
)

# Add files to upload
files = []
files.push("./chameleon.jpg")

# Start the Assembly
response = assembly.create! *files

until response.finished?
  sleep 1; response.reload!
end

if !response.error?
  # handle success
end

Python

Read docs: Python SDK

# pip install pytransloadit
from transloadit import client

tl = client.Transloadit('YOUR_TRANSLOADIT_KEY', 'YOUR_TRANSLOADIT_SECRET')
assembly = tl.new_assembly()

# Set Encoding Instructions
assembly.add_step('thumb', {
  'use': ':original',
  'robot': '/image/resize',
  'width': 75,
  'height': 75,
  'resize_strategy': 'fit'
})
# Add files to upload
assembly.add_file(open('./chameleon.jpg', 'rb'))

# Start the Assembly
assembly_response = assembly.create(retries=5, wait=True)

print assembly_response.data.get('assembly_id')

# or
print assembly_response.data['assembly_id']

Go

Read docs: Go SDK

We have a powerful Go client that makes using Transloadit easy.

// go get gopkg.in/transloadit/go-sdk.v1
package main

import (
	"fmt"

	"gopkg.in/transloadit/go-sdk.v1"
)

options := transloadit.DefaultConfig
options.AuthKey = "YOUR_TRANSLOADIT_KEY"
options.AuthSecret = "YOUR_TRANSLOADIT_SECRET"
client := transloadit.NewClient(options)

// Initialize new Assembly
assembly := transloadit.NewAssembly()

// Set Encoding Instructions
assembly.AddStep("thumb", map[string]interface{}{
  "use": ":original",
  "robot": "/image/resize",
  "width": 75,
  "height": 75,
  "resize_strategy": "fit"
})

// Add files to upload
assembly.AddFile("myfile_1", "./chameleon.jpg")

// Start the Assembly
info, err := client.StartAssembly(context.Background(), assembly)
if err != nil {
  panic(err)
}

// All files have now been uploaded and the Assembly has started but no
// results are available yet since the conversion has not finished.
// WaitForAssembly provides functionality for polling until the Assembly
// has ended.
info, err = client.WaitForAssembly(context.Background(), info)
if err != nil {
  panic(err)
}

fmt.Printf("You can check some results at: \n")
fmt.Printf("  - %s\n", info.Results["thumb"][0].SSLURL)

Java

Read docs: Java SDK

// compile 'com.transloadit.sdk:transloadit:0.1.5'
import com.transloadit.sdk.Assembly;
import com.transloadit.sdk.Transloadit;
import com.transloadit.sdk.exceptions.LocalOperationException;
import com.transloadit.sdk.exceptions.RequestException;
import com.transloadit.sdk.response.AssemblyResponse;

import java.io.File;
import java.util.HashMap;
import java.util.Map;

public class Main {
  public static void main(String[] args) {
    Transloadit transloadit = new Transloadit("YOUR_TRANSLOADIT_KEY", "YOUR_TRANSLOADIT_SECRET");
    Assembly assembly = transloadit.newAssembly();
    // Set Encoding Instructions

    Map<String Object> thumbStepOptions = new HashMap();
    thumbStepOptions.put("use", ":original");
    thumbStepOptions.put("width", 75);
    thumbStepOptions.put("height", 75);
    thumbStepOptions.put("resize_strategy", "fit");
    assembly.addStep("thumb", "/image/resize", thumbStepOptions);
      

    // Add files to upload
    assembly.addFile(new File("./chameleon.jpg"));
    
    // Start the Assembly
    try {
      AssemblyResponse response = assembly.save();
      
      // Wait for Assembly to finish executing
      while (!response.isFinished()) {
        response = transloadit.getAssemblyByUrl(response.getSslUrl());
      }
      
      System.out.println(response.getId());
      System.out.println(response.getUrl());
      System.out.println(response.json());
    } catch (RequestException | LocalOperationException e) {
      // Handle exception here
    }
  }
}

Try it now

Cropping Images

This demo resizes and crops uploaded images to 100×100 pixels. Drop files to the left, or select files using the device's native file browser. See the Demos page for the Assembly Instructions used.

Zip Archive

Transloadit can assemble multiple files into a single result, or a single file into multiple results. This demo archives all uploaded files into a single .zip file. See the Demos page for the Assembly Instructions used.

Face Detection

With the Uppy Transloadit integration, users can upload photos from their webcam straight to Transloadit. Excellent for capturing profile pictures! See the Demos page for the Assembly Instructions used.

Virus Scanning

Scan uploaded files and reject virus-infected ones before they ever reach your servers. See the Demos page for the Assembly Instructions used.

Image Optimization

Save bandwidth and storage space by losslessly optimizing images, reducing file sizes by up to 80%. See the Demos page for the Assembly Instructions used.

Built by Engineers who create industry standards

Our developers are major contributors of Node.js and have built a number of modules now inseparable from Node's core ecosystem. Transloadit is proud to be the first company to run Node.js in production.

These are our open source projects: