Uppy File Uploader
Uppy is an open source file uploader for web browsers by Transloadit. With over 24,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.
Robodog is an Uppy-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 like Instagram, integration with HTML forms, and more. Because it’s based on Uppy, you can add any existing Uppy plugin to add more functionality.
Transloadit hosts the required server components (Companion and Tusd) for you, as well as of course our encoding API. Robodog configures all the Plugins to leverage this.
If you wonder about the name, Transloadit's encoding features are grouped in Robots and we advertise Uppy is as cute as a puppy so we felt Robodog to be the only appropriate name for a marriage of them.
Option 1: Bundle yourself
npm install @uppy/robodog --save --save-exact # OR: yarn add @uppy/robodog
You could then
require it via Browserify, Webpack or similar to bundle Uppy yourself like so:
const robodog = require('@uppy/robodog') require('@uppy/robodog/dist/robodog.css')
This allows you to customize Uppy and create smaller, more focussed bundles leaving out any Plugin you don't need.
Option 2: Use a prebuilt bundle from our CDN
If you don't want to install anything or use bundlers, you can use the prebuilt bundle, by sourcing it directly from our CDN like so:
<link rel="stylesheet" href="//releases.transloadit.com/uppy/robodog/v2.5.1/robodog.min.css"> <script src="//releases.transloadit.com/uppy/robodog/v2.5.1/robodog.min.js"></script> <!-- you can now use e.g.: window.Robodog.pick() -->
The downside of this is that you cannot just pick a few plugins that you need, and that if our CDN goes down, your file uploader stops working. That said, our CDN is based on AWS CloudFront so this should be unlikely, and if Transloadit itself goes down, file uploading will be broken anyway.
If you are migrating from the jQuery SDK, we recommend checking out Robodog's migration guide for jQuery SDK. This shows counterparts for all of the old SDKs options, and shows how to create a similar flow, where Uppy would use an existing form to operate on.
But as said, Robodog can also disguise as a button with a modal picker, or draw drag and drop area inline. Uppy is modular and customizable in that regard, and we recommend checking out the full documentation for Uppy's Robodog Plugin to discover the integration best for your use case.
For demo purposes, we'll just show one happy path, of using Transloadit's face detection in combination with a picker, and we'll be using our CDN bundle for easy copy-pastability. Make sure to replace
YOUR_TRANSLOADIT_KEY with your Transloadit API Key.
See the full documentation for Uppy's Robodog Plugin, which is the recommended way to integrate Transloadit and Uppy.
Related blog posts
- Working asynchronously with PHP July 13, 2021
- Add real-time video uploading to a site without writing code, with Bubble.is and Transloadit August 2, 2019
- Uppy 1.0: Your best friend in file uploading April 25, 2019
- The world meets Uppy - the file uploader that we soon hope to unleash July 26, 2016
- Front-End Developer October 21, 2015