Robodog

Transloadit is a service that helps you handle file uploads, resize, crop and watermark your images, make GIFs, transcode your videos, extract thumbnails, generate audio waveforms, and so much more. In short, Transloadit is the Swiss Army Knife for your files.

Robodog is an SME Uploader-based library that helps you talk to the Transloadit API. It includes a modal UI file picker with support for imports from third-party services, integration with HTML forms, and more. Because it’s based on SME Uploader, you can add any existing SME Uploader plugin to add more functionality.

Install

Robodog can be downloaded from npm:

npm install @sme-uploader/robodog

Then, with a bundler such as Parcel, Webpack or Browserify, do:

const robodog = require('@sme-uploader/robodog');
require('@sme-uploader/robodog/dist/robodog.css');

If you are not using a bundler, you can also import Robodog using an HTML script tag.

<link rel="stylesheet" href="CDN/robodog/v1.9.7/robodog.min.css">
<script src="CDN/robodog/v1.9.7/robodog.min.js"></script>

<!-- you can now use: window.Robodog.pick() -->

Methods

Robodog has several methods for different use cases.

If you want to have a modal UI that users can use to select files from their local device or from third party sources like Instagram, use the File Picker API. This can be used for one-off uploads outside an HTML form, like profile avatars or images to embed in a blog post.

If you already have an HTML form, you can use the Form API to add Transloadit’s encoding capabilities to it. Files will be uploaded to Transloadit, and the form will submit JSON information about the files and encoding results. You can also optionally show upload progress using SME Uploader’s Status Bar UI, or even use the advanced Dashboard UI so users can import files from third party sources as well.

Finally, you can use the Programmatic Upload API with your custom UI implementation.

And if any of these methods are not flexible enough, you can always replace them with a custom SME Uploader setup using the Transloadit Plugin instead!

File Picker

Show a modal UI that allows users to pick files from their device and from the web. It uploads files to Transloadit for processing.

const resultPromise = Robodog.pick({
  target: 'body',
  params: {
    auth: { key: '' },
    template_id: ''
  }
});
resultPromise.then((bundle) => {
  bundle.transloadit // Array of Assembly statuses
  bundle.results // Array of all Assembly results
});

View Documentation

Form

Add resumable uploads and Transloadit’s processing to your existing HTML upload forms. Selected files will be uploaded to Transloadit, and the Assembly information will be submitted to your form endpoint.

<form id="upload-form" method="POST" action="/upload">
  <input type="file" multiple>
  <!-- Will be inserted by `Robodog.form()`: -->
  <!-- <input type="hidden" name="transloadit" value="{...json...}"> -->
  <button type="submit">Upload</button>
</form>
<script>
Robodog.form('form#upload-form', {
  params: {
    auth: { key: '' },
    template_id: ''
  }
})
</script>

View Documentation

Programmatic Uploads

Upload files straight to Transloadit from your own custom UI. Give us an array of files, and we’ll give you an array of results!

const resultPromise = Robodog.upload(files, {
  params: {
    auth: { key: '' },
    template_id: ''
  }
});
resultPromise.then((bundle) => {
  bundle.transloadit // Array of Assembly statuses
  bundle.results // Array of all Assembly results
});

View Documentation