Skip to main content

Uppy 0.30: Introducing Robodog

· 4 min read
renee

In 0.30, we are introducing a new friend for Uppy — the Robodog.

Robodog: easy to assemble

Robodog​

Uppy is developed by Transloadit. Transloadit is the Swiss Army Knife for your files: importing, resizing, cropping and watermarking images, making GIFs, transcoding videos, extracting thumbnails, generating audio waveforms, and so much more — all in a single service. Uppy has a similarly large feature set in dozens of plugins, but because of that it can be complicated to wire everything up for the best experience.

Robodog is a new Uppy-based library that has been trained to work with Transloadit. It includes three components:

  1. File picker, using the Dashboard plugin you know and love for the modal UI, with support for imports from third-party services.
  2. Form: integration with your existing HTML forms. Files will be uploaded to Transloadit, and the form will submit JSON information about the files and encoding results.
  3. Upload: one-line programmatic uploads — call transloadit.upload(files, opts) and get an array of results back.

Here’s a demo:

See the Pen Robodog: resizing and optimizing your avatar by Uppy File Uploader (@uppy) on CodePen.

You can install Robodog from NPM:

npm install @uppy/robodog --save

Or import it by using an HTML script tag:

<link
	rel="stylesheet"
	href="https://releases.transloadit.com/uppy/v0.30.3/robodog.min.css"
/>
<script src="https://releases.transloadit.com/uppy/v0.30.3/robodog.min.js"></script>

Dashboard Improvements​

As usual, we are making constant iterations and improvements to the Dashboard plugin. Accessibility has been improved, we’ve updated and fixed some icons, breadcrumbs in remote providers, and the issue with browserBackButton and multiple modals.

Progress or no progress​

We’ve improved how the StatusBar behaves when no progress reporting is available (which is the case for MS Edge):

Upload Success​

⚠️ Breaking

We’ve changed upload-success and upload-error signatures.

uppy.on('upload-success', (file, responseObject) => {
	// (depending on the uploader plugin used, it might contain
	// less info, the example is for @uppy/xhr-upload)
	// responseObject = {
	//   status, // HTTP status code (0, 200, 300)
	//   body, // response body
	//   uploadURL // the file url, if it was returned
	// }
});
uppy.on('upload-error', (file, responseObject) => {
	// responseObject = {
	//   status, // HTTP status code (0, 200, 300)
	//   body // response body
	// }
});

See the docs and PR #1138 for more details.

Changelog​

  • @uppy/robodog: 📣⚠️ Add Robodog — Transloadit browser SDK (#1135 / @goto-bus-stop)
  • @uppy/dashboard: fixed issue with browserBackButton history and multiple modals (#1258 / @goto-bus-stop, @arturi)
  • @uppy/core: Set response in Core rather than in upload plugins (#1138 / @arturi)
  • @uppy/core: Don’t emit a complete event if an upload has been canceled (#1271 / @arturi)
  • @uppy/companion: Support Redis option (auth_pass, etc...) (#1215 / @tranvansang)
  • @uppy/companion: Sanitize text before adding to html (f77a102 / @ifedapoolarewaju)
  • @uppy/dashboard: Update pause-resume-cancel icons (#1241 / @arturi, @nqst)
  • @uppy/dashboard: Fix issues with multiple modals (#1258 / @goto-bus-stop, @arturi)
  • @uppy/dashboard: Dashboard ui fixes: fix icon animation jiggling, inherit font, allow overriding outline, fix breadcrumbs, bug with x button being stuck, fix an issue with long note margin on mobile (#1279 / @arturi)
  • @uppy/provider-views: update instagram nextPagePath after every fetch (25e31e5 / @ifedapoolarewaju)
  • @uppy/react: Allow changing instance in uppy prop (#1247 / @goto-bus-stop)
  • @uppy/react: Typescript: Make DashboardModal.target prop optional (#1254 / @mattes3)
  • @uppy/aws-s3: Use user-provided filename / type for uploaded object, fixes #1238 (#1257 / @goto-bus-stop)
  • @uppy/tus: Update to [email protected] with React Native support (#1250 / @arturi)
  • build: Improve dev npm script: use Parcel for bundled example, re-build lib automatically, don’t open browser and no ghosts mode, start companion when developing (but there’s optional npm run dev:no-companion) (#1280 / @arturi)